/* Shared stylesheet for every app page and for /support/.
   The only thing a page changes is --accent on <body>. Keep it to one
   color per app: the tint, the links, the buttons and the ambient wash
   all read from it. */

:root{
  --ink:#0F0D0B;
  --card:#161311;
  --line:#26221E;
  --bone:#EAE5DB;
  --mist:#938C82;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono:"Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --squircle:url("/assets/squircle.svg");
  --accent:#938C82;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--bone); outline-offset:3px; border-radius:2px; }

.ambient{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(58% 42% at 50% 0%,
    color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 72%);
}
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .ambient{ display:none; }
}

.wrap{ max-width:920px; margin:0 auto; padding:0 24px; }

/* ---------- header ---------- */
.top{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:28px 0 0; gap:20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  color:var(--mist);
}
.top a:hover{ color:var(--bone); }
.top nav{ display:flex; gap:20px; }

/* ---------- hero ---------- */
.hero{ padding:72px 0 56px; display:grid; gap:28px; }
.hero .id{ display:flex; align-items:center; gap:22px; }
.icon{
  width:88px; height:88px; flex:none;
  display:grid; place-items:center;
  font-family:var(--serif); font-weight:560; font-size:34px; color:var(--accent);
  background:radial-gradient(120% 120% at 20% 15%,
    color-mix(in srgb, var(--accent) 16%, var(--card)) 0%, var(--card) 70%);
  -webkit-mask-image:var(--squircle); mask-image:var(--squircle);
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  position:relative; overflow:hidden;
}
.icon img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
h1{
  font-family:var(--serif); font-weight:430;
  font-size:clamp(38px, 7vw, 62px); line-height:1.02; letter-spacing:-.015em;
}
.tagline{
  font-family:var(--serif); font-weight:430; font-style:italic;
  font-size:clamp(21px, 3.4vw, 28px); line-height:1.25; color:var(--bone);
  max-width:22ch;
}
.hero p.lede{ color:var(--mist); max-width:56ch; font-size:17px; }
.facts{
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mist);
  display:flex; flex-wrap:wrap; gap:6px 0; align-items:center;
}
.facts .sep{ padding:0 10px; color:var(--line); }

.cta{
  display:inline-flex; align-items:center; gap:9px; justify-self:start;
  padding:12px 20px; border-radius:11px;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  color:var(--accent);
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  transition:background-color .25s ease, border-color .25s ease;
}
.cta:hover{
  background:color-mix(in srgb, var(--accent) 10%, transparent);
  border-color:var(--accent);
}
.cta.pending{ color:var(--mist); border-style:dashed; pointer-events:none; }

/* ---------- sections ---------- */
section.block{ padding:26px 0 0; }
.section-label{
  border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:34px;
  font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--mist);
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
.feats{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px 40px; list-style:none; }
.feats h3{
  font-family:var(--serif); font-weight:430; font-size:22px; line-height:1.15;
  letter-spacing:-.01em; margin-bottom:8px;
}
.feats p{ color:var(--mist); font-size:15.5px; }
.feats li::before{
  content:""; display:block; width:22px; height:1px;
  background:var(--accent); opacity:.7; margin-bottom:16px;
}

.note{
  margin-top:44px; padding:22px 24px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); color:var(--mist); font-size:14.5px; max-width:70ch;
}
.note strong{ color:var(--bone); font-weight:500; }

/* ---------- footer ---------- */
footer{
  margin-top:76px; padding:26px 0 56px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mist);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between;
}
footer a{ border-bottom:1px solid var(--line); padding-bottom:1px; }
footer a:hover{ color:var(--bone); }

/* ---------- motion ---------- */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
  /* `backwards` fill, with the hidden state only inside the keyframe. If these
     animations never run, the content is simply there. Putting opacity:0 in the
     rule itself would make an unplayed animation mean an invisible page. */
  .hero > *, .block{ animation:rise .6s ease backwards; }
  .hero .id{ animation-delay:.04s }
  .hero .tagline{ animation-delay:.1s }
  .hero .lede{ animation-delay:.16s }
  .hero .facts{ animation-delay:.22s }
  .hero .cta{ animation-delay:.28s }
  .block{ animation-delay:.34s }
  @keyframes rise{ from{ opacity:0; transform:translateY(10px); } }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .feats{ grid-template-columns:1fr; gap:30px; }
  .icon{ width:68px; height:68px; font-size:27px; }
  .hero{ padding:56px 0 44px; }
}