/* Glass layer: floating pill nav, glowing hero ring, translucent surfaces over ambient colour.
   Built on the page's own tokens so light and dark both work; dark is the default. */
:root{--glass-bg:color-mix(in srgb,var(--ink) 6%,transparent);--glass-line:color-mix(in srgb,var(--ink) 14%,transparent);--glass-hi:color-mix(in srgb,var(--ink) 22%,transparent)}
body{position:relative;overflow-x:clip}
/* Ambient colour that the glass picks up */
body:before{content:'';position:fixed;inset:-20% -10% auto -10%;height:120vh;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 15% 20%,#4c9ef52b,transparent 70%),radial-gradient(35% 30% at 85% 30%,#c7b7f026,transparent 70%),radial-gradient(40% 35% at 55% 85%,#f5b9e71f,transparent 70%);
  animation:ambient 24s ease-in-out infinite alternate}
@keyframes ambient{to{transform:translate3d(3%,4%,0) scale(1.06)}}
:root:not([data-theme=dark]) body:before{opacity:.55}

.glass,.screen-tabs,.care-grid article,.feature-index a:hover,.mb-panel{background:var(--glass-bg);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 18px 50px #0003}
.mb-panel{background:#141417b3}
.developer-wrap{background:color-mix(in srgb,var(--surface) 55%,transparent);backdrop-filter:blur(18px)}
.care-grid article{border-radius:32px;transition:transform .35s var(--ease),border-color .3s}
.care-grid article:hover{border-color:var(--glass-hi)}

/* Floating pill nav */
.site-header{position:sticky;top:12px;background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;padding-inline:20px;z-index:40}
.site-header.is-scrolled{box-shadow:none}
.site-header .nav{width:min(1040px,100%);height:56px;padding:0 10px 0 18px;border-radius:999px;background:color-mix(in srgb,var(--canvas) 55%,transparent);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),0 12px 40px #0004}
.site-header .container{width:min(1040px,100%)}
.scroll-progress{top:0}

/* Hero: glowing ring behind the headline */
.hero{overflow:clip;padding-top:96px}
.hero:before{display:none}
.hero-glow{position:absolute;left:50%;top:120px;width:min(760px,110%);height:520px;translate:-50% 0;z-index:-1;background:radial-gradient(closest-side,#4c9ef524,#c7b7f014 55%,transparent 75%);filter:blur(20px);pointer-events:none}

/* Announcement pill and glass secondary button */
.eyebrow.pill{padding:5px 14px 5px 5px;border-radius:999px;background:var(--glass-bg);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi);font-size:13px;color:var(--ink);backdrop-filter:blur(16px)}
.eyebrow.pill b{background:#8a5cff40;color:#cfc2ff;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:650}
:root:not([data-theme=dark]) .eyebrow.pill b{color:#5b3fd0}
.button.glass{background:var(--glass-bg);color:var(--ink);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi);backdrop-filter:blur(16px)}
.button.glass:hover{background:color-mix(in srgb,var(--ink) 11%,transparent)}
.hero .button:not(.glass){box-shadow:0 8px 30px #ffffff26,inset 0 -2px 0 #0002}

/* Marquee of what's inside */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);padding-block:30px 10px}
.marquee p{text-align:center;color:var(--muted);font-size:14px;margin-bottom:18px}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 40s linear infinite}
.marquee-track span{font-size:clamp(20px,2.4vw,30px);font-weight:700;letter-spacing:-.04em;color:color-mix(in srgb,var(--ink) 38%,transparent);white-space:nowrap}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Demo chrome matches the real app: centred navigation, real icon, storage bar segments */
.mm-topbar{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center}
.mm-topbar .mm-pills{display:flex;justify-content:center;width:auto;order:0;overflow:visible}
.mm-topbar .mm-right{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.mm-logo{background:none!important;padding:0}.mm-logo img{width:28px;height:28px;border-radius:8px}
@media(max-width:820px){.mm-topbar{display:flex!important;flex-wrap:wrap}.mm-topbar .mm-pills{order:3;width:100%;overflow:auto;justify-content:flex-start}.mm-topbar .mm-right{margin-left:auto}}
.mm-seg-bar{display:flex;gap:2px;height:12px;margin:14px 0 10px}
.mm-seg-bar i{display:block;height:100%;border-radius:2px;background:#17171a;transform-origin:0 50%;animation:mm-grow .8s var(--ease) both}
.mm-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:11px}
.mm-legend span{display:inline-flex;align-items:center;gap:6px}.mm-legend i{width:8px;height:8px;border-radius:50%;background:#17171a}
.mm-legend em{font-style:normal;opacity:.7;font-family:ui-monospace,Menlo,monospace}
.mm-prescan{display:grid;gap:14px}
.mm-prescan .two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mm-places{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mm-place{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--mm-soft);border:0;text-align:left;cursor:pointer;color:inherit;font:inherit}
.mm-place b{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--mm-blue);color:#17171a}
.mm-place small{display:block;font-size:10px;opacity:.65;font-family:ui-monospace,Menlo,monospace}
.mm-after{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mm-after div{padding:14px;border-radius:16px;background:var(--mm-surface)}
.mm-after strong{display:block;font-size:12px;margin-bottom:3px}.mm-after span{font-size:11px;opacity:.65}
@media(max-width:820px){.mm-prescan .two,.mm-after{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){body:before,.marquee-track,.mm-seg-bar i{animation:none!important}.marquee-track{flex-wrap:wrap;width:auto;justify-content:center}}
@media(max-width:760px){.site-header .nav{height:50px;padding-left:12px}}
/* The panel illustration is always the dark app; keep it near-opaque so light mode doesn't turn it grey. */
.mb-panel{background:#141417f0}

/* Announcement ticker: messages stack in one grid cell (so the pill is as wide as the longest) and slide through */
.ticker-pill{gap:10px}
.ticker{display:grid;overflow:hidden;height:26px;align-items:center;text-align:left}
.ticker-pill{--from:130%;--to:-130%}
.ticker .t{grid-area:1/1;display:flex;align-items:center;gap:10px;white-space:nowrap;opacity:0;transform:translateY(var(--from)) scale(.96);filter:blur(5px);transition:opacity .45s var(--ease),transform .7s cubic-bezier(.34,1.4,.5,1),filter .45s var(--ease);pointer-events:none}
.ticker .t.is-on{opacity:1;transform:none;filter:none}
.ticker .t.is-out{opacity:0;transform:translateY(var(--to)) scale(.96);filter:blur(5px);transition-timing-function:var(--ease)}
.ticker .t b{flex:none}
.ticker .t[data-tone=blue] b{background:#4c9ef540;color:#a9d0ff}.ticker .t[data-tone=green] b{background:#b7f27640;color:#d5f8ad}.ticker .t[data-tone=amber] b{background:#f2c64b40;color:#ffe29a}
:root:not([data-theme=dark]) .ticker .t[data-tone=blue] b{color:#1f6fd0}:root:not([data-theme=dark]) .ticker .t[data-tone=green] b{color:#3b7d10}:root:not([data-theme=dark]) .ticker .t[data-tone=amber] b{color:#8a6300}
@media(prefers-reduced-motion:reduce){.ticker .t{transition:none;filter:none}}

/* Hero cards: equal height, no shadow spilling onto neighbours, a soft coloured glow underneath instead */
.hero-orbit{grid-template-rows:220px;align-items:stretch}
.hero-orbit .orbit-card{grid-row:auto!important;min-height:0;display:flex;flex-direction:column;border-radius:32px;
  box-shadow:inset 0 1px 0 #ffffff70,0 26px 44px -26px var(--glow,#0008)}
.hero-orbit .orbit-card.green{--glow:#b7f276aa}.hero-orbit .orbit-card.pink{--glow:#f5b9e7aa}.hero-orbit .orbit-card.blue{--glow:#4c9ef5aa}
.hero-orbit .orbit-card strong{margin-top:18px}
.hero-orbit .model-glyph{font-size:84px;margin-top:auto;align-self:flex-end;opacity:.85}
.hero-orbit .orbit-card svg{margin-top:auto;height:96px}
.hero-orbit .orbit-card.pink svg path{stroke-dasharray:600;stroke-dashoffset:600;animation:draw-line2 2s var(--ease) .4s forwards}
.hero-orbit .folder-glyph{right:22px;bottom:16px}
@media(max-width:760px){.hero-orbit{grid-template-rows:none}.hero-orbit .orbit-card{min-height:170px}}

/* Phones: nothing in the hero may be wider than the screen. */
.hero>*{min-width:0;max-width:100%}
.ticker-pill{max-width:100%}
.ticker{min-width:0}
.ticker .t{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;line-height:26px}
.ticker .t b{margin-right:10px}
@media(max-width:760px){
  .hero h1{font-size:clamp(42px,13.5vw,64px)}
  .hero-copy>p:not(.fine-print){font-size:17px}
  .hero-actions{flex-direction:column;gap:12px}
  .hero .button{width:min(300px,100%)}
}

/* Nav: never wrap; drop the least important links as the pill gets narrower */
.nav-links a,.button.small,.brand{white-space:nowrap}
.nav-links{gap:22px}
@media(max-width:1180px){.nav-links a:nth-child(n+6){display:none}}
@media(max-width:1000px){.nav-links a:nth-child(n+4){display:none}.nav-links{gap:18px}}
@media(max-width:860px){.nav-links{display:none}}

/* Footer: brand left, links centred, copyright right; wraps cleanly on small screens */
.site-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px 32px;padding-block:44px;border-top:1px solid var(--line);margin-top:30px}
.site-footer .brand{justify-self:start}
.site-footer .footer-links{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center}
.site-footer .footer-links a{font-size:14px;font-weight:550;color:var(--muted);transition:color .2s}
.site-footer .footer-links a:hover{color:var(--ink)}
.site-footer>span{display:none}
.site-footer small{justify-self:end;color:var(--muted);font-size:13px}
@media(max-width:860px){.site-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.site-footer .brand,.site-footer small{justify-self:center}}