/* Space Dots and AI home page (spaces/index.html): the 3.0 product page. White theme like the rest of the Spaces site, with the app's own
   colours: the dots' blue, pink, green, cyan and violet. Only transform and opacity animate, and nothing moves with reduced motion. */
.home{--blue:#2f6fed;--pink:#e5317a;--green:#58c322;--cyan:#22b8d9;--violet:#9b3fe0;--ink:#0f1722;--soft:#f4f6fb;
  font-family:var(--sc-font-body);color:var(--ink)}
.home p,.home li{font-family:inherit;color:var(--muted)}
.home h1,.home h2,.home h3{font-family:var(--sc-font-display);font-weight:400;letter-spacing:.005em;color:var(--ink)}
.home section{padding:var(--sc-section-y) 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 var(--sc-space-5);padding:6px 12px 6px 6px;border-radius:999px;background:#eef3ff;color:var(--blue);font-size:var(--sc-small-size);font-weight:700}
.eyebrow b{padding:3px 9px;border-radius:999px;background:var(--blue);color:#fff;font-size:var(--sc-label-size);letter-spacing:.08em;text-transform:uppercase}
.section-head{max-width:var(--sc-container-narrow);margin:0 auto var(--sc-gap-block);text-align:center}
.section-head h2{margin:0 0 var(--sc-gap-title);font-size:var(--sc-h2-size);line-height:var(--sc-h2-line)}
.section-head p{margin:0;font-size:var(--sc-lead-size);line-height:var(--sc-lead-line)}

/* hero */
.hero{position:relative;overflow:hidden;padding:var(--sc-space-7) 0 var(--sc-section-y)!important;background:radial-gradient(70% 80% at 80% 40%,#eef2ff 0%,#fff 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px)}
.hero h1{margin:0 0 var(--sc-gap-title);font-size:var(--sc-display-size);line-height:var(--sc-display-line)}
.hero h1 span{display:block}.hero h1 .l1{color:var(--blue)}.hero h1 .l3{color:var(--pink)}
.hero .lede{margin:0 0 var(--sc-gap-lead);max-width:560px;font-size:var(--sc-lead-size);line-height:var(--sc-lead-line);color:#3d4b5c}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--sc-button-height);padding:0 var(--sc-button-pad-x);border-radius:var(--sc-radius-button);font-family:var(--sc-font-body);font-size:var(--sc-button-font-size);font-weight:var(--sc-button-weight);text-decoration:none!important;transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:#0f1722;color:#fff}
.btn-dark small{display:block;font-size:10px;font-weight:600;opacity:.75;line-height:1}.btn-dark span{display:grid;text-align:left;line-height:1.15}
.btn-dark svg{width:22px;height:22px}
.btn-light{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px #d7dde6}
.hero-note{margin:var(--sc-space-4) 0 0;font-size:var(--sc-small-size)!important;line-height:var(--sc-small-line)!important;color:var(--subtle)!important}
.hero-art{position:relative;margin:0}

/* what's new */
.new{background:var(--soft)}
.new-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sc-gap-grid)}
.new-card{position:relative;padding:var(--sc-space-5);border-radius:var(--sc-radius-card);background:#fff;transition:transform .2s ease}
.new-card:hover{transform:translateY(-3px)}
.new-card h3{margin:var(--sc-space-4) 0 8px;font-size:var(--sc-h3-size);line-height:var(--sc-h3-line)}
.new-card p{margin:0;font-size:var(--sc-small-size);line-height:var(--sc-small-line)}
/* gallery */
.gallery{overflow:hidden}
.shots{display:flex;gap:var(--sc-space-5);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px max(var(--sc-gutter),calc((100% - var(--sc-container))/2)) 28px;scrollbar-width:thin}
.shots figure{flex:0 0 auto;width:min(68vw,260px);margin:0;scroll-snap-align:center}
.shots img{display:block;width:100%;height:auto;border-radius:var(--sc-radius-card);background:#fff;box-shadow:0 24px 50px -20px rgba(15,23,34,.35),0 0 0 1px rgba(15,23,34,.06)}
.shots figcaption{margin-top:var(--sc-space-3);text-align:center;font-size:var(--sc-small-size);font-weight:500;color:var(--muted)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sc-gap-grid);counter-reset:step;margin:0;padding:0;list-style:none}
.steps li{position:relative;margin:0;padding:var(--sc-space-5);border-radius:var(--sc-radius-card);background:var(--soft);counter-increment:step}
.steps li::before{content:counter(step);display:grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:50%;background:var(--ink);color:#fff;font-family:'Righteous',cursive;font-size:18px}
.steps h3{margin:0 0 8px;font-size:var(--sc-h3-size);line-height:var(--sc-h3-line)}.steps p{margin:0;font-size:var(--sc-small-size);line-height:var(--sc-small-line)}

/* meet the dots */
.meet{background:linear-gradient(180deg,#fff,#f3f1ff)}
.meet-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(24px,5vw,64px)}
.meet-art img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto;border-radius:var(--sc-radius-card);mix-blend-mode:multiply}
.meet h2{margin:0 0 var(--sc-gap-title);font-size:var(--sc-h2-size);line-height:var(--sc-h2-line)}
.meet-grid>div>p{font-size:var(--sc-lead-size);line-height:var(--sc-lead-line)}
.dot-list{display:flex;flex-wrap:wrap;gap:10px;margin:var(--sc-space-5) 0 0;padding:0;list-style:none}
.dot-list li{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:var(--sc-small-size);font-weight:500;line-height:1.2;color:var(--ink)}
.dot-list li.member{background:#0f1722;color:#fff;box-shadow:none}
.meet .fine{margin-top:var(--sc-space-4);font-size:var(--sc-small-size)!important;line-height:var(--sc-small-line)!important;color:var(--subtle)}

/* styles */
.style-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sc-gap-grid)}
.style{display:grid;justify-items:center;gap:var(--sc-space-3);padding:var(--sc-space-5) 10px;border-radius:var(--sc-radius-card);background:var(--soft);font-size:var(--sc-small-size);font-weight:500}
.style span{width:56px;height:56px;border-radius:50%}
.s-classic{background:radial-gradient(circle at 35% 30%,#8fb4ff,#2f6fed 60%,#1d4fc0)}
.s-glass{background:radial-gradient(circle at 35% 30%,#fff,#bfe3ff 45%,rgba(47,111,237,.35));box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 6px 16px rgba(47,111,237,.25)}
.s-ink{background:#fff;box-shadow:inset 0 0 0 4px #0f1722}
.s-neon{background:#0f1722;box-shadow:inset 0 0 0 3px #3dfc9a,0 0 18px #3dfc9a}
.s-candy{background:repeating-linear-gradient(45deg,#ff8fc6 0 8px,#fff 8px 16px)}
.s-chrome{background:linear-gradient(160deg,#fafafa,#9aa3ad 45%,#f2f4f7 55%,#6c7682)}
.s-sunset{background:linear-gradient(160deg,#ffcf5c,#ff7a59 50%,#c43da3)}

/* small print and closing band */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sc-gap-grid)}
.fact{padding:var(--sc-space-5);border-radius:var(--sc-radius-card);background:#fff}
.fact h3{margin:0 0 8px;font-size:var(--sc-h3-size);line-height:var(--sc-h3-line)}.fact p{margin:0;font-size:var(--sc-small-size);line-height:var(--sc-small-line)}
.cta{padding:0 0 var(--sc-section-y)!important}
.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(28px,4vw,48px);border-radius:var(--sc-radius-card);background:linear-gradient(120deg,#2f6fed,#9b3fe0 60%,#e5317a);color:#fff}
.cta-band h2{margin:0 0 8px;color:#fff;font-size:var(--sc-h2-size);line-height:var(--sc-h2-line)}
.cta-band p{margin:0;color:rgba(255,255,255,.88);font-size:var(--sc-lead-size);line-height:var(--sc-lead-line)}
.cta-band .btn-light{box-shadow:none}

@media(max-width:900px){
  .hero-grid,.meet-grid{grid-template-columns:1fr}
  .hero-art{max-width:520px;margin:0 auto}
  .new-grid,.steps,.facts{grid-template-columns:1fr 1fr}
  .style-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:600px){
  .new-grid,.steps,.facts{grid-template-columns:1fr}
  .style-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .btn{width:100%}
}

/* ── live dots (spaces/dots.js) ── */
[data-dot]{display:inline-block;flex:none;width:52px;height:52px;line-height:0}
[data-dot] .live-dot{display:block;width:100%;height:100%;overflow:visible}
.live-dot-eyes{transition:transform .5s cubic-bezier(.3,.7,.3,1)}
.live-dot-eyes.is-blinking{transform:scaleY(.12)!important;transition:transform .07s ease}
[data-dot].is-shaking .live-dot{animation:dot-shake .6s ease-in-out}
@keyframes dot-shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-9deg) scale(1.04)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}

/* the hero ring from the app's logo */
.dots-hero{position:relative;width:min(100%,560px);aspect-ratio:1;margin:0 auto}
.dots-hero::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(47,111,237,.14),rgba(229,49,122,.08) 55%,transparent 72%);filter:blur(10px)}
.dots-hero-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dots-hero-lines line{stroke:#b9c3d6;stroke-width:.35;stroke-dasharray:1 1.4;vector-effect:non-scaling-stroke;stroke-width:1.4}
.dots-hero-lines .orbit{fill:none;stroke:#dfe4ee;stroke-width:1;vector-effect:non-scaling-stroke}
.dots-hero-team{position:absolute;inset:0}
.dots-hero-team [data-dot]{position:absolute;width:15%;height:15%;transform:translate(-50%,-50%);animation:dot-float 6s ease-in-out infinite alternate}
.dots-hero-team [data-dot]:nth-child(2n){animation-duration:7.4s;animation-delay:-2s}
.dots-hero-team [data-dot]:nth-child(3n){animation-duration:5.6s;animation-delay:-3.5s}
.dots-hero-team .lead{width:24%;height:24%;animation:dot-breathe 5s ease-in-out infinite}
@keyframes dot-float{from{transform:translate(-50%,-50%) translateY(-5px)}to{transform:translate(-50%,-50%) translateY(6px)}}
@keyframes dot-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.04)}}

/* small dots in the chips */
.dot-list [data-dot]{width:26px;height:26px}
.dot-list li::before{content:none}
.dot-list li{padding-left:6px}

@media(prefers-reduced-motion:reduce){.dots-hero-team [data-dot],.dots-hero-team .lead{animation:none}}