/* ==========================================================================
   Sections, top to bottom: hero, packages, why, support, store, terms,
   footer
   ========================================================================== */

/* Background canvases shared by several sections */
.bgwave {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  pointer-events: none;
  z-index: 0;
}
#why, #support, #terms { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  height: clamp(580px, 88vh, 740px);
  overflow: hidden;
  background: var(--bg);
}
.ribbons {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: ribbonIn 1.8s var(--ease) both;
}
.ribbons g { will-change: transform; } /* moved every frame by js/effects.js */
.ribbons path { transform-box: fill-box; transform-origin: center; }
.r1 { animation: fl1 14s ease-in-out infinite; }
.r2 { animation: fl2 17s ease-in-out infinite; }
.r3 { animation: fl3 12s ease-in-out infinite; }
.r4 { animation: fl1 19s ease-in-out infinite reverse; }

.hero-copy {
  position: relative;
  z-index: 2;
  padding-top: clamp(120px, 18vh, 168px);
  display: grid;
  gap: var(--md);
  justify-items: start;
  opacity: calc(1 - var(--hp, 0) * 1.25); /* --hp: hero scroll progress, set in JS */
}
h1 {
  font-size: clamp(2.75rem, 7.2vw, 7rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  max-width: 13ch;
}
.sub {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  color: var(--mute);
  max-width: 34ch;
}

/* ==========================================================================
   Packages: catalog stage
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--md);
  align-items: end;
  margin-bottom: var(--xl2);
}

/* Stage the window sits on */
.stage {
  position: relative;
  overflow: hidden;
  background: #fafafa;
  padding: clamp(20px, 6vw, 88px);
  perspective: 1400px;
  margin-top: var(--xs);
}
.swirl {
  position: absolute;
  left: 0;
  top: -8%;
  width: 100%;
  height: 116%;
  filter: blur(2.5px);
}

/* ==========================================================================
   Why Polaris
   ========================================================================== */
.caps { display: grid; grid-template-columns: 1fr; gap: var(--md); }
.caps .head { display: grid; gap: var(--md); align-content: start; }
.list { display: grid; }
.item { position: relative; padding: var(--xl) 0; }

/* Hairline that draws in on reveal */
.item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left;
  transition: transform 1.4s var(--ease-in-out) calc(var(--d, 0) * 1ms);
}
.js .item:not(.in)::after { transform: scaleX(0); }

/* Solid line that sweeps across on hover */
.item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--ink);
  z-index: 1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease);
}
.item:hover::before { transform: scaleX(1); transform-origin: left; }

.item h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  letter-spacing: -.045em;
  line-height: 1.1;
  display: flex;
  gap: var(--sm);
  align-items: center;
  flex-wrap: wrap;
  transition: transform .6s var(--ease);
}
.item:hover h3 { transform: translateX(12px); }
.item p { color: var(--mute); margin-top: var(--sm); max-width: 34ch; line-height: 1.4; transition: color .4s; }
.item:hover p { color: var(--ink); }
.badge { font: 500 .75rem var(--sans); letter-spacing: -.02em; background: var(--ink); color: var(--bg); padding: 5px 8px; line-height: 1; }
.item code {
  font: 500 .75rem var(--mono);
  letter-spacing: 0;
  display: inline-block;
  margin: var(--sm) 8px 0 0;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  transition: border-color .3s, transform .4s var(--ease-spring);
}
.item code:hover { border-color: var(--ink); transform: translateY(-2px); }

/* ==========================================================================
   Support
   ========================================================================== */
.dark h2 { max-width: 14ch; }
.cols { display: grid; grid-template-columns: 1fr; gap: var(--xl); margin-top: var(--xl3); }
.col .rule { border-top: 1px solid var(--dk-rule); padding-top: var(--md); }
.col h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.045em; line-height: 1.1; }
.col p { color: var(--dk-mute); margin-top: var(--sm); max-width: 30ch; line-height: 1.4; }

/* ==========================================================================
   Store CTA
   ========================================================================== */
.engine { overflow: hidden; min-height: 640px; }
.streaks {
  position: absolute;
  left: 0;
  top: -10%;
  width: 100%;
  height: 120%;
  filter: blur(3px);
}
.engine .divider { position: relative; z-index: 2; }
.engine .inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--xl);
  align-items: end;
  padding-top: clamp(140px, 24vh, 240px);
  padding-bottom: var(--xl6);
}
.engine h2 { max-width: 12ch; font-size: clamp(2.5rem, 6vw, 5.5rem); }
.engine-side { display: grid; gap: var(--md); justify-items: start; }
.engine .desc { max-width: 40ch; }
.engine .acts { display: flex; gap: var(--xl); flex-wrap: wrap; }

/* ==========================================================================
   Terms
   ========================================================================== */
.get-row { display: grid; grid-template-columns: 1fr; gap: var(--md); align-items: end; margin-top: var(--xl3); }
.big { font-size: clamp(2.75rem, 8.4vw, 8rem); letter-spacing: -.06em; line-height: 1; max-width: 11ch; }
.get-row .acts { display: grid; gap: var(--md); justify-items: start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { background: var(--bg); color: var(--ink); border-top: 1px solid var(--rule); padding: var(--xl4) 0 var(--xl); }
.foot-top { display: grid; grid-template-columns: 1fr; gap: var(--xl3); }
.foot-brand { display: grid; gap: var(--sm); align-content: start; }
.foot-brand p { color: var(--mute); max-width: 32ch; line-height: 1.4; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--xl); }
.foot-cols div { display: grid; gap: 10px; align-content: start; font-size: .9375rem; }
.foot-cols h4 { font: 500 .75rem var(--mono); letter-spacing: 0; color: var(--mute); margin-bottom: 6px; }
.foot-cols a { text-decoration: none; width: max-content; position: relative; }
.foot-cols a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease);
}
.foot-cols a:hover::after { transform: scaleX(1); transform-origin: left; }
.foot-cols span { color: var(--mute); }
.legal { margin-top: var(--xl3); padding-top: var(--md); border-top: 1px solid var(--rule); color: var(--mute); font-size: .75rem; line-height: 1.4; }
.foot-bottom { margin-top: var(--md); display: flex; justify-content: space-between; gap: var(--md); flex-wrap: wrap; color: var(--mute); font-size: .75rem; }