/* ============================================================
   site-core.css — the chrome every Flare page shares.

   Lifted verbatim out of index.html so the header, footer, buttons and
   forms are the same object on every page rather than a re-creation of
   it. index.html still carries its own inline copy: it is the one page
   with the WebGL hero and it is already live, so it is not worth the
   regression risk to convert it in the same pass. When it does move over,
   delete its inline block from ":root{" down to the product sections and
   link this instead — the rules below are byte-identical to what it has.
   ============================================================ */

:root{
  --void:#0d0308;
  --plum:#1e0714;
  --plum-lift:#370d26;
  --magenta:#ff2e9a;
  --magenta-deep:#c2126e;
  --ember:#ff6b35;
  --violet:#b44cff;
  --gold:#d9a441;
  --ink:#ffffff;
  --mauve:#dcb3c8;
  --mauve-dim:#9c7288;
  --hair:rgba(255,46,154,.16);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--display);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--magenta);color:#fff}

/* ---------- header ---------- */
#top{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:68px;display:flex;align-items:center;
  padding:0 clamp(16px,4vw,40px);
  gap:clamp(16px,3vw,44px);
}
#top .plate{
  position:absolute;inset:0;opacity:0;
  background:rgba(16,4,11,.82);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--hair);
  transition:opacity .25s ease;
  pointer-events:none;
}
/* lift the flow children above the absolutely-positioned plate — but not
   #rail, which must stay absolute or it becomes a flex item */
#top > *:not(.plate):not(#rail){position:relative}

/* brand lockup — plate gradient sampled from the supplied mark */
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
/* the supplied artwork carries its own gradient plate, so it goes in as a
   real image — the rounding comes from the container clipping it */
.mark{
  width:34px;height:34px;border-radius:10px;overflow:hidden;line-height:0;
  box-shadow:0 0 22px -6px rgba(255,46,154,.75);
  flex:0 0 auto;
}
.mark svg{display:block;width:100%;height:100%}
.brand .word{
  font-size:20px;font-weight:800;letter-spacing:-.035em;color:var(--ink);
}
.brand:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:6px}

#top nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);margin-right:auto}
#top nav a{
  position:relative;text-decoration:none;color:var(--mauve);
  font-size:14px;font-weight:500;letter-spacing:-.005em;padding:6px 0;
  white-space:nowrap;transition:color .16s ease;
}
#top nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--magenta);transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease;
}
#top nav a:hover{color:var(--ink)}
#top nav a:hover::after{transform:scaleX(1)}
#top nav a:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:3px}
.signin{
  color:var(--mauve);text-decoration:none;font-size:14px;font-weight:500;
  padding:10px 14px;border-radius:999px;border:1px solid var(--hair);
  white-space:nowrap;transition:color .16s ease,border-color .16s ease;
}
.signin:hover{color:var(--ink);border-color:rgba(255,46,154,.5)}
.signin:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
@media (max-width:900px){ .signin{display:none} }

/* the hero countdown hands off to this once it scrolls away */
#minitime{
  display:flex;align-items:center;gap:7px;opacity:0;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;color:var(--mauve);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--hair);background:rgba(255,46,154,.06);
}
#minitime::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--magenta);
  box-shadow:0 0 8px var(--magenta);
}
.cta.sm{padding:11px 20px;font-size:14px;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 6px 26px -8px rgba(255,46,154,.7)}

/* how far through the descent you are — a pinned hero otherwise reads
   as a stuck page */
#rail{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--ember),var(--magenta),var(--violet));
  pointer-events:none;
}

#burger{
  display:none;width:40px;height:40px;flex:0 0 auto;
  background:none;border:1px solid var(--hair);border-radius:10px;
  cursor:pointer;padding:0;
}
#burger span{display:block;width:16px;height:1.5px;background:var(--ink);margin:3.5px auto;transition:transform .2s ease,opacity .2s ease}
#burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
#burger:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

#drawer{
  position:fixed;top:68px;left:0;right:0;z-index:59;
  background:rgba(16,4,11,.96);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair);
  padding:18px clamp(16px,4vw,40px) 26px;
  display:none;flex-direction:column;gap:4px;
}
#drawer.open{display:flex}
#drawer a{
  text-decoration:none;color:var(--mauve);font-size:17px;font-weight:600;
  padding:13px 0;border-bottom:1px solid var(--hair);
}
#drawer a:last-of-type{border-bottom:0}
#drawer .cta{margin-top:14px;align-self:stretch;text-align:center}

@media (max-width:900px){
  html{scroll-padding-top:72px}
  #top nav, #minitime, #top .cta{display:none}
  #burger{display:block;margin-left:auto}
}

.eyebrow{
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:10px;margin:0;
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--magenta);box-shadow:0 0 10px var(--magenta);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.cta{
  font-family:var(--display);font-size:16px;font-weight:600;
  color:#fff;text-decoration:none;
  padding:16px 30px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  background:var(--magenta);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset, 0 10px 44px -8px rgba(255,46,154,.75);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 16px 54px -8px rgba(255,46,154,.9)}
.cta:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* ---------- signup ---------- */
.signup{display:flex;flex-direction:column;gap:10px;width:100%;max-width:430px}
.signup .field{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--hair);border-radius:999px;
  padding:6px 6px 6px 20px;
  transition:border-color .18s ease,background .18s ease;
}
.signup .field:focus-within{border-color:var(--magenta);background:rgba(255,46,154,.09)}
.signup input[type="email"]{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-family:var(--display);font-size:15px;color:var(--ink);padding:10px 0;
}
.signup input::placeholder{color:var(--mauve-dim)}
.signup input[aria-invalid="true"]{color:#ff9a9a}
.signup .cta{flex:0 0 auto;padding:12px 22px;font-size:14px;align-self:auto}
.formnote{
  margin:0;min-height:1.2em;padding-left:4px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;color:var(--mauve-dim);
}
.formnote.bad{color:#ff8f8f}
.formnote.ok{color:var(--gold)}
.signup.busy .cta{opacity:.6;cursor:progress}
.signup.done .field{display:none}
.signup.done .formnote{font-size:14px;font-family:var(--display);letter-spacing:0;line-height:1.5}
.hostline{
  display:flex;align-items:flex-start;gap:9px;margin:0;padding-left:4px;
  font-size:13px;color:var(--mauve);cursor:pointer;
}
.signup.done .hostline{display:none}
.hostline input{accent-color:var(--magenta);margin:2px 0 0;flex:0 0 auto}

/* ---------- join dialog ---------- */
#joindlg{
  border:0;padding:0;background:none;color:var(--ink);
  max-width:min(92vw,470px);width:100%;
}
#joindlg::backdrop{background:rgba(7,2,5,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dlgbody{
  position:relative;
  background:linear-gradient(168deg,var(--plum-lift),var(--plum) 62%);
  border:1px solid var(--hair);border-radius:20px;
  padding:30px clamp(22px,5vw,34px) 30px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  box-shadow:0 50px 110px -50px rgba(255,46,154,.7);
}
.dlgbody h2{margin:0;font-size:clamp(25px,4vw,33px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.dlgbody > p{margin:0;color:var(--mauve);font-size:14.5px;line-height:1.55;max-width:42ch}
#dlgclose{
  position:absolute;top:12px;right:12px;width:34px;height:34px;
  background:none;border:1px solid var(--hair);border-radius:50%;
  color:var(--mauve);font-size:16px;line-height:1;cursor:pointer;
}
#dlgclose:hover{color:var(--ink);border-color:var(--magenta)}
#dlgclose:focus-visible,.hostline:focus-within{outline:2px solid var(--violet);outline-offset:3px}

/* ---------- footer ---------- */
#foot{
  position:relative;z-index:2;background:var(--void);
  border-top:1px solid var(--hair);
  padding:clamp(56px,8vh,88px) clamp(20px,6vw,88px) clamp(34px,5vh,52px);
}
#foot .inner{
  max-width:1180px;margin:0 auto;
  display:grid;gap:clamp(30px,5vw,72px);
  grid-template-columns:minmax(280px,1fr) auto;
  align-items:start;
}
#foot h2{margin:0 0 12px;font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
#foot .sub{margin:0 0 20px;color:var(--mauve);font-size:15px;line-height:1.55;max-width:44ch}
#foot nav{display:flex;flex-direction:column;gap:11px}
#foot nav a,.footlink{
  color:var(--mauve);text-decoration:none;font-size:14px;
  background:none;border:0;padding:0;cursor:pointer;text-align:left;
  font-family:var(--display);
}
#foot nav a:hover,.footlink:hover{color:var(--ink)}
#foot nav a:focus-visible,.footlink:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:3px}
/* ---------- footer film ----------
   The clip never shows as footage: foot-film.js samples it into a grid and
   redraws it as dots, so it reads as the same matrix the homepage uses. The
   <video> itself is offscreen and only feeds the canvas. */
.footfilm{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.footfilm video{position:absolute;width:2px;height:2px;opacity:0;pointer-events:none}
.footfilm canvas{display:block;width:100%;height:100%;opacity:.9}
/* heavy at the top where the links live, light at the bottom where it can
   carry the eye out of the page */
.footfilm::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,3,8,.94) 0%,rgba(13,3,8,.6) 32%,rgba(13,3,8,.28) 100%);
}

/* the wordmark sitting behind the whole footer, clipped by it. Sized off
   the viewport so it always runs the full width and bleeds off the bottom
   the way a printed masthead would. */
#foot{overflow:hidden}
#foot::after{
  content:"Flare";
  position:absolute;left:50%;bottom:-.3em;transform:translateX(-50%);
  font-family:var(--display);font-size:clamp(150px,30vw,460px);font-weight:900;
  letter-spacing:-.06em;line-height:.78;white-space:nowrap;
  background:linear-gradient(96deg,var(--ember) 0%,var(--magenta) 52%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.09;pointer-events:none;user-select:none;
}
/* everything real rides above it */
#foot .inner,#foot .footcap{position:relative;z-index:2}
#foot::after{z-index:1}

.footcap{
  max-width:1180px;margin:clamp(38px,6vh,64px) auto 0;
  padding-top:24px;border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-start;
}
.footid{display:flex;align-items:flex-start;gap:12px}
.footid .mark{width:28px;height:28px;border-radius:8px;box-shadow:none}
.footid p{
  margin:0;font-size:12.5px;line-height:1.45;color:var(--mauve-dim);
}
/* the follow row sits inside the link columns, so it reads as one of them */
.footsocial{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:-4px 0 0 -7px}
.footsocial a,.footsocial span{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  color:var(--mauve-dim);transition:color .18s ease,background .18s ease;
}
.footsocial a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.footsocial a:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.footsocial svg{width:17px;height:17px;display:block}
/* the date sits opposite the mark, on the same line */
.footcap .grow{
  margin-left:auto;align-self:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mauve-dim);
}
@media (max-width:560px){.footcap .grow{margin-left:0;flex-basis:100%}}
@media (max-width:820px){
  #foot .inner{grid-template-columns:1fr}
  .footsocial{margin-left:0}
}

/* ---------- product sections ---------- */
.band{
  position:relative;z-index:2;background:var(--void);
  padding:clamp(64px,9vh,112px) clamp(20px,6vw,88px);
  border-top:1px solid var(--hair);
}
.band .wrap{max-width:1180px;margin:0 auto}
.band h2{
  margin:10px 0 0;font-size:clamp(28px,3.4vw,46px);font-weight:800;
  letter-spacing:-.03em;line-height:1.04;text-wrap:balance;
}
.band .lede{margin:14px 0 0;color:var(--mauve);font-size:16px;line-height:1.6;max-width:58ch}
.band .head{margin-bottom:clamp(32px,5vh,56px)}


h1{
  font-size:clamp(40px,5.6vw,80px);
  line-height:.96;letter-spacing:-.035em;font-weight:800;
  margin:0;text-wrap:balance;
}
h1 .alive{
  background:linear-gradient(96deg,var(--ember) 0%,var(--magenta) 52%,var(--violet) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* four capability groups */
.caps{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.cap{background:var(--plum);padding:28px 26px 30px;display:flex;flex-direction:column;gap:14px}
.cap h3{
  margin:0;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--magenta);display:flex;align-items:center;gap:9px;
}
.cap h3::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--magenta);
  box-shadow:0 0 10px var(--magenta)}
.cap ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.cap li{font-size:14.5px;line-height:1.5;color:var(--mauve);padding-left:15px;position:relative}
.cap li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:var(--mauve-dim)}

/* footer columns */
/* flex, not grid: the nav lives in an `auto` track, and an auto-fit grid
   of 1fr columns resolves to min-content inside one — which is why these
   three were stacking instead of sitting side by side. */
.footcols{display:flex;flex-wrap:wrap;gap:26px clamp(30px,4.5vw,72px)}
.footcol{min-width:128px}
.footcol h4{
  margin:0 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mauve-dim);font-weight:500;
}
.footcol a,.footcol .footlink{display:block;margin-bottom:11px}

@media (max-width:860px){
  /* #foot nav a sets padding:0 at (1,0,2); .footcol a is (0,1,1) and loses,
     so this needs the id to actually win. */
  #foot .footcol a,#foot .footcol .footlink{padding:12px 0;margin-bottom:0}
  .hostline{min-height:44px;align-items:center;gap:11px}
  .hostline input[type=checkbox]{width:22px;height:22px;flex:0 0 auto}
}

/* Subpages have no scroll-driven hero, so anything the homepage reveals
   on scroll simply starts visible here. */
.reveal{opacity:1;transform:none}

/* Fixed 68px header — content needs to clear it. The homepage doesn't:
   its first child is a full-height stage that intentionally sits under. */
.page-top{padding-top:68px}
@media (max-width:900px){ .page-top{padding-top:60px} }