/*
  Aloop marketing site — shared design system.

  Matches the landing page (index.html, which is deliberately self-contained):
  the same silvered ground, ink ramp, Space Grotesk / Archivo / Space Mono
  stack, pill button, and Space Mono micro-labels.

  Two deliberate differences from the landing page:
    1. The ground carries a white veil. The landing shows its gradient across a
       single viewport; these pages scroll long-form text over all of it, and the
       raw gradient's mid stops (#9ea4ac) drop body copy under 4.5:1. The veil
       keeps every ink token AA at the darkest stop.
    2. Nothing animates. The landing's drifting blobs and pointer parallax are a
       hero flourish; here the blobs are static and there is no script.
*/

:root {
  /* ink ramp — verified AA (>=4.5:1) against the darkest veiled ground stop */
  --ink: #17181a;
  --ink-body: #1b1c1e;
  --ink-soft: #3b4045;
  --label: #464b51;
  --muted: #4f545a;
  --muted-2: #5c6168;

  --line: rgba(24, 26, 29, 0.10);

  /* glass surfaces — these sit on the ground rather than covering it */
  --surface: rgba(255, 255, 255, 0.58);
  --surface-edge: rgba(255, 255, 255, 0.66);
  --surface-shadow: 0 1px 2px rgba(20, 22, 25, 0.05), 0 10px 30px rgba(20, 22, 25, 0.06);

  --btn: #191a1c;
  --btn-hover: #2e3033;
  --btn-ink: #f4f5f6;
  --btn-shadow: 0 1px 2px rgba(20, 22, 25, 0.28), 0 8px 24px rgba(20, 22, 25, 0.12);

  --font-display: 'Space Grotesk', Helvetica, system-ui, sans-serif;
  --font-sans: 'Archivo', Helvetica, system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --container: 1120px;
  --prose: 760px;
  /* Horizontal page gutter. Widened on phones (see the 640px block) so full-width
     copy — section heads, prose — isn't pinned against the screen edge. */
  --gutter: 24px;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: #e9eaec;
  /* The landing page's gradient under a flat white veil — see the header note. */
  background-image:
    linear-gradient(0deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.62)),
    linear-gradient(160deg, #a9aeb5 0%, #edeff1 32%, #9ea4ac 56%, #f6f7f8 78%, #a4aab1 100%);
  background-attachment: fixed;
  background-size: cover;
}

/* Static depth. The landing animates four of these and tracks the pointer; these
   two only sit there. Fixed, so long pages keep one steady field behind them. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}
body::before {
  top: -16%;
  left: -12%;
  width: 62vw;
  height: 62vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.44) 46%, rgba(255,255,255,0) 72%);
}
body::after {
  right: -14%;
  bottom: -22%;
  width: 66vw;
  height: 66vw;
  background: radial-gradient(circle at 50% 50%, rgba(108,117,127,0.26) 0%, rgba(108,117,127,0.11) 48%, rgba(108,117,127,0) 74%);
}

/* Lift every landmark above the blob layer. */
main,
.site-footer { position: relative; z-index: 1; }

a { color: var(--ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img, svg { max-width: 100%; }

hr { border: 0; height: 1px; background: var(--line); margin: 0; }

/* ---------- layout ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container--prose { max-width: var(--prose); }

/* The landing page's status chip — dot, Space Mono, wide tracking — reused as the
   section label on every interior page. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------- header ---------- */

.site-brand {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.brand:hover { text-decoration: none; color: var(--ink); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 30px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  transition: background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.btn--primary {
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: var(--btn-shadow);
}
.btn--primary:hover { background: var(--btn-hover); color: var(--btn-ink); }

/* ---------- hero (get-the-app, 404) ---------- */

.hero {
  text-align: center;
  /* Fill the first screen (minus the 66px brand row) so the next section
     sits fully below the fold instead of peeking up at the bottom. */
  min-height: calc(100vh - 66px);
  min-height: calc(100svh - 66px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(56px, 9vw, 96px) 0;
}
.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(58px, 11vw, 116px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero__title {
  margin: 28px auto 0;
  max-width: 720px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(23px, 3.3vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.hero__sub {
  margin: 22px auto 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero__actions {
  /* Auto margins, not the parent's align-items: .hero centres its .container
     child, and this block sits inside that container. */
  margin: 38px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}
.hero__actions .btn { width: 100%; }

/* ---------- interior page hero ---------- */

.page-hero {
  padding: clamp(48px, 8vw, 92px) 0 clamp(12px, 1.6vw, 18px);
}
.page-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* ---------- sections ---------- */

.section { padding: clamp(52px, 8vw, 96px) 0; }
.section + .section { border-top: 1px solid var(--line); }

.section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.section__lead {
  margin: 18px 0 0;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Landing-page micro-note ("Aloop is currently in private beta"). */
.cta__note {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- prose (legal pages) ---------- */

/* Vertical longhands, not the `padding` shorthand: terms/privacy put `prose` on the
   same element as `container`, and a shorthand here would wipe the horizontal gutter. */
.prose {
  padding-top: clamp(20px, 3vw, 32px);
  padding-bottom: clamp(64px, 9vw, 100px);
}
/* Mono, but NOT uppercase-tracked: this line carries two full dates, and the
   landing's tracked-caps idiom is for short labels — it wrapped to three lines. */
.prose__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin: 0 0 40px;
}
.prose h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 48px 0 14px;
  scroll-margin-top: 24px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 30px 0 10px;
}
.prose p, .prose li { color: var(--ink-soft); font-size: 16.5px; line-height: 1.7; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin: 0 0 9px; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); font-weight: 600; }

.prose__toc {
  background: var(--surface);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--surface-shadow);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding: 22px 24px;
  margin: 0 0 44px;
}
.prose__toc p {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.prose__toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.prose__toc li { margin: 0 0 7px; font-size: 15px; }
.prose__toc a { color: var(--ink-soft); text-decoration: none; }
.prose__toc a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); }
.footer__legal {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* Space Mono draws © as a SUPERIOR mark: its ink is x-height tall (71% of cap
   height) and floats 0.308em above the baseline. Every other glyph on this line is
   a capital (text-transform: uppercase), so untouched it reads as small and raised.
   1/0.71 scales it to cap height; the -0.308em drops its ink onto the baseline —
   that offset is the glyph's own, so it is expressed in the span's em, not the
   parent's. Both numbers are measured from the font, not eyeballed. */
.footer__legal .copyright {
  font-size: 1.41em;
  vertical-align: -0.308em;
  letter-spacing: normal;
}

/* ---------- utilities ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--btn);
  color: var(--btn-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- landing page (index.html) ---------- */

/* index.html shows the ground at FULL strength — no white veil. It fills exactly
   one viewport and its own .veil overlay lifts the centre, where the copy sits, so
   the gradient's mid stops never end up behind body text. Interior pages veil it
   (see `body` above) because they scroll long-form copy across the whole thing. */
body.landing {
  background-image: linear-gradient(160deg, #a9aeb5 0%, #edeff1 32%, #9ea4ac 56%, #f6f7f8 78%, #a4aab1 100%);
}
/* The landing draws its own four-blob layer, animated and pointer-tracked.
   Drop the static interior pair so they don't stack. */
body.landing::before,
body.landing::after { content: none; }

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* .blobs is inset -12%; without this it would extend the scrollable area. */
  overflow: hidden;
}

/* atmosphere */

.blobs {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  z-index: 0;
  filter: blur(48px) saturate(112%);
}
.blobs__layer { position: absolute; inset: 0; will-change: transform; }
.blob { position: absolute; border-radius: 50%; will-change: transform; }

.blob--a {
  top: 4%; left: -6%; width: 62%; height: 66%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.62) 46%, rgba(255,255,255,0) 72%);
  animation: blobA 26s ease-in-out infinite;
}
.blob--b {
  top: 18%; right: -10%; width: 70%; height: 74%;
  background: radial-gradient(circle at 50% 50%, rgba(108,117,127,0.85) 0%, rgba(108,117,127,0.4) 48%, rgba(108,117,127,0) 74%);
  animation: blobB 34s ease-in-out infinite;
}
.blob--c {
  bottom: -14%; left: 16%; width: 66%; height: 62%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 0%, rgba(255,255,255,0.56) 44%, rgba(255,255,255,0) 70%);
  animation: blobC 30s ease-in-out infinite;
}
.blob--d {
  top: -12%; left: 30%; width: 54%; height: 58%;
  background: radial-gradient(circle at 50% 50%, rgba(92,101,112,0.72) 0%, rgba(92,101,112,0.3) 50%, rgba(92,101,112,0) 76%);
  animation: blobD 40s ease-in-out infinite;
}

/* Pointer-tracked highlight. Positioned from the top-left and moved by transform;
   the script sets opacity to 1 on first pointer move. */
.glow {
  position: absolute;
  top: 0; left: 0;
  width: 62vmax; height: 62vmax;
  margin-left: -31vmax; margin-top: -31vmax;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  filter: blur(28px);
  opacity: 0;
  transition: opacity 0.5s ease;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 26%, rgba(255,255,255,0.18) 48%, rgba(255,255,255,0) 68%);
  will-change: transform;
}

.veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 82% at 50% 45%, rgba(255,255,255,0.52) 0%, rgba(255,255,255,0.18) 42%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 38%, rgba(24,26,29,0.10) 100%);
}

/* content */

.landing__hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 24px 96px;
  text-align: center;
}
.landing__hero .wordmark {
  font-size: clamp(64px, 17vw, 132px);
  animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.tagline {
  margin: 28px 0 0;
  max-width: 26ch;
  font-size: clamp(17px, 4.4vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  text-wrap: pretty;
  animation: rise 0.9s 0.08s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.landing__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 38px;
  margin-top: 26px;
  width: 100%;
  max-width: 360px;
  animation: rise 0.9s 0.16s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.landing__actions .btn { width: 100%; }

/* Minimal footer variant — one centred row of links, no columns. */
.site-footer--minimal {
  margin-top: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* Only the landing fades its footer in; the interior pages are static. */
body.landing .site-footer--minimal { animation: fade 1s 0.3s ease both; }
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-footer__nav a { color: var(--muted); transition: color 0.2s ease; }
.site-footer__nav a:hover { color: var(--ink); text-decoration: none; }
.site-footer--minimal .footer__legal { text-align: center; }

/* ---------- landing keyframes ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blobA {
  0%   { transform: translate3d(-6%, -4%, 0) scale(1); }
  50%  { transform: translate3d(14%, 10%, 0) scale(1.18); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1); }
}
@keyframes blobB {
  0%   { transform: translate3d(8%, 6%, 0) scale(1.1); }
  50%  { transform: translate3d(-12%, -8%, 0) scale(0.92); }
  100% { transform: translate3d(8%, 6%, 0) scale(1.1); }
}
@keyframes blobC {
  0%   { transform: translate3d(-4%, 10%, 0) scale(0.95); }
  50%  { transform: translate3d(10%, -12%, 0) scale(1.25); }
  100% { transform: translate3d(-4%, 10%, 0) scale(0.95); }
}
@keyframes blobD {
  0%   { transform: translate3d(6%, -8%, 0) scale(1.15); }
  50%  { transform: translate3d(-10%, 8%, 0) scale(0.9); }
  100% { transform: translate3d(6%, -8%, 0) scale(1.15); }
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  :root { --gutter: 32px; }
  body { font-size: 16px; }
  .prose__toc ol { columns: 1; }
  /* The blobs are sized in vw; on a narrow screen that leaves them tiny and
     off-centre, so bias them back over the page. */
  body::before { width: 96vw; height: 96vw; left: -30%; }
  body::after { width: 104vw; height: 104vw; right: -34%; }
}

/* ---------- reduced motion ---------- */

/* Only the landing page animates; this switches it off and drops the
   pointer-tracked glow entirely. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .glow { display: none; }
}