@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/inter-400.8909904ab6c8.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url("/assets/inter-600.f9a06e79cd3a.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("/assets/space-grotesk-700.35f8aec56cfd.woff2") format("woff2")}
/* Zakros landing (SCR-21, brand.md 15): tokens only. No hex, no px literal: the build refuses them.
   Media queries use em (16 px root): 64em = breakpoint.lg 1024, 48em = breakpoint.md 768, 20em = breakpoint.sm 320.
   @font-face rules are prepended by build.mjs with the fingerprinted font paths. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-8); }
body.landing {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-body);
  font-weight: var(--font-weight-regular);
}
:focus-visible {
  outline: var(--size-stroke-marker) solid var(--border-focus);
  outline-offset: var(--space-1);
  border-radius: var(--radius-focus);
}
a { color: var(--text-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--bg-accent-hover); }
p { margin: 0 0 var(--space-4); max-width: var(--font-measure-prose); }
h1, h2, h3 { margin: 0 0 var(--space-4); font-family: var(--font-family-display); font-weight: var(--font-weight-bold); color: var(--text-primary); }
h1 { font-size: var(--font-size-display-xl); line-height: var(--font-line-height-display); letter-spacing: var(--font-letter-spacing-display); }
h2 { font-size: var(--font-size-display-l); line-height: var(--font-line-height-display); letter-spacing: var(--font-letter-spacing-display); }
h3 { font-size: var(--font-size-lg); line-height: var(--font-line-height-heading); font-family: var(--font-family-text); font-weight: var(--font-weight-semibold); }
.mono { font-family: var(--font-family-mono); font-size: var(--font-size-13); font-variant-numeric: var(--font-numeric); }
.muted { color: var(--text-tertiary); }
.eyebrow {
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-heading);
  letter-spacing: var(--font-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
}

/* skip link: first focusable element, visible on focus (WCAG 2.4.1) */
.skip {
  position: absolute;
  left: var(--space-4);
  top: calc(-1 * var(--size-control-lg) - var(--space-4));
  padding: 0 var(--space-4);
  height: var(--size-control-lg);
  line-height: var(--size-control-lg);
  background: var(--bg-accent);
  color: var(--text-on-accent);
  border-radius: var(--radius-md);
  z-index: 10;
}
.skip:focus { top: var(--space-4); }

/* top */
.top {
  max-width: var(--size-content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); text-decoration: none; }
.brand .mark { width: var(--size-icon-lg); height: var(--size-icon-lg); color: var(--bg-accent); }
.wordmark { font-family: var(--font-family-display); font-weight: var(--font-weight-bold); letter-spacing: var(--font-letter-spacing-display); font-size: var(--font-size-d2); }
.top__nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.top__nav a { min-height: var(--size-target-min); display: inline-flex; align-items: center; color: var(--text-secondary); }

/* hero: 7/5 grid, left aligned; the margin path runs from under the wordmark down the left edge into the shot */
main { display: block; }
.hero {
  position: relative;
  max-width: var(--size-content-max);
  margin: var(--space-8) auto var(--space-16);
  padding: 0 var(--space-6) 0 calc(var(--space-6) + var(--space-8));
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-12);
  align-items: start;
}
.hero::before {
  content: "";
  position: absolute;
  left: var(--space-6);
  top: calc(-1 * var(--space-6));
  bottom: var(--space-8);
  width: var(--component-margin-path-hook-length);
  border-left: var(--size-stroke-margin-path) solid var(--border-default);
  border-bottom: var(--size-stroke-margin-path) solid var(--border-default);
  border-bottom-left-radius: var(--component-margin-path-turn-radius);
  pointer-events: none;
}
.hero__text { position: relative; }
.hero__text::before {
  /* the one accent segment of the viewport: beside the headline (brand.md 9) */
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-8) - var(--size-stroke-margin-path));
  top: var(--space-8);
  height: var(--space-12);
  width: var(--size-stroke-margin-path);
  background: var(--memory-rail-now);
  border-radius: var(--radius-pill);
}
.lead { font-size: var(--font-size-lg); line-height: var(--font-line-height-heading); color: var(--text-secondary); }
.hero__for { color: var(--text-secondary); }
.hero__why { color: var(--text-primary); }
.cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-4); }
.btn {
  display: inline-flex;
  align-items: center;
  height: var(--size-control-lg);
  padding: 0 var(--component-button-padding-x);
  border-radius: var(--component-button-radius);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  line-height: var(--font-line-height-control);
}
.btn--primary { background: var(--bg-accent); color: var(--text-on-accent); }
.btn--primary:hover { background: var(--bg-accent-hover); color: var(--text-on-accent); }
.link { font-weight: var(--font-weight-medium); }
.prelaunch {
  margin: 0;
  display: inline-flex;
  align-items: center;
  height: var(--size-control-lg);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}
.open-app { font-size: var(--font-size-sm); }

/* screenshots: 2x capture, cropped to one feature; a missing one shows its alt text on bg.subtle (ST-ERR) */
.shot { margin: 0; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  border: var(--size-stroke-hairline) solid var(--border-default);
  box-shadow: var(--shadow-e2);
  background: var(--bg-surface);
}
.shot--missing {
  aspect-ratio: 8 / 5;
  display: flex;
  align-items: flex-end;
  padding: var(--component-card-padding);
  border-radius: var(--radius-xl);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: var(--size-stroke-hairline) solid var(--border-subtle);
}
.shot--missing p { margin: 0; font-size: var(--font-size-13); }

/* features: alternating text/screenshot sections separated by whitespace, then bg.subtle bands */
.sections { display: flex; flex-direction: column; }
.feature {
  max-width: var(--size-content-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-12);
  align-items: center;
}
.feature:nth-child(odd) { grid-template-columns: 7fr 5fr; }
.feature:nth-child(odd) .feature__text { order: 1; }
.feature:nth-child(odd) .shot { order: 2; }
.feature:nth-child(even) .feature__text { order: 2; }
.feature:nth-child(even) .shot { order: 1; }
.feature--band { max-width: none; padding-left: 0; padding-right: 0; background: var(--bg-subtle); }
.feature--band > * { max-width: var(--size-content-max); }
.feature--band .feature__text, .feature--band .shot, .feature--band .flow, .feature--band .flow__note {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
.feature--band { display: block; }
.feature--band .shot { max-width: calc(var(--size-content-max) * 0.6); margin-top: var(--space-8); }
.feature__text--wide { max-width: var(--size-content-max); }

/* the S-089 statement: three columns, stack below breakpoint.md */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-4); }
.flow__col { background: var(--bg-surface); border-radius: var(--component-card-radius); padding: var(--component-card-padding); box-shadow: var(--shadow-e1); }
.flow__col ul { list-style: none; margin: 0; padding: 0; }
.flow__col li { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) 0; border-top: var(--size-stroke-hairline) solid var(--border-subtle); }
.flow__col li:first-child { border-top: 0; }
.flow__col small { color: var(--text-tertiary); font-size: var(--font-size-13); }
.flow__note { margin-top: var(--space-5); color: var(--text-secondary); max-width: none; }

/* changelog */
.release { margin: var(--space-4) 0; }
.release h3 { display: flex; gap: var(--space-3); align-items: baseline; }
.release time { color: var(--text-tertiary); font-family: var(--font-family-mono); font-size: var(--font-size-13); }
.release ul { margin: 0; padding-left: var(--space-5); }
.page { max-width: var(--size-content-max); margin: var(--space-8) auto var(--space-16); padding: 0 var(--space-6); }
.page h1 { font-size: var(--font-size-display-l); }

/* empty state (404): a short margin path with one hook and the message */
.empty { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; max-width: var(--font-measure-prose); }
.empty .path { width: var(--size-icon-lg); height: var(--space-12); color: var(--border-default); }
.empty h1 { font-size: var(--font-size-d2); font-family: var(--font-family-text); font-weight: var(--font-weight-semibold); }

/* footer */
.foot { max-width: var(--size-content-max); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); color: var(--text-secondary); font-size: var(--font-size-13); border-top: var(--size-stroke-hairline) solid var(--border-subtle); }
.foot p { margin-bottom: var(--space-2); }

/* motion: one rise per viewport, off under reduced motion */
@keyframes rise { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
.rise { animation: rise var(--motion-duration-enter) var(--motion-easing-out-soft) both; }
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  :focus-visible { transition: none; }
}

/* reflow: breakpoint.lg (64em) one column; breakpoint.md (48em) statement stacks; 320 px keeps one column, no 2D scroll */
@media (max-width: 64em) {
  .hero, .feature, .feature:nth-child(odd) { grid-template-columns: 1fr; gap: var(--space-8); }
  .feature .feature__text, .feature .shot { order: 0; }
  .hero { padding-left: calc(var(--space-6) + var(--space-6)); margin-bottom: var(--space-8); }
  .hero__text::before { left: calc(-1 * var(--space-6) - var(--size-stroke-margin-path)); }
  .feature { padding-top: var(--space-12); padding-bottom: var(--space-12); }
}
@media (max-width: 48em) {
  .flow { grid-template-columns: 1fr; }
  h1 { font-size: var(--font-size-display-l); }
  h2 { font-size: var(--font-size-d1); }
  .top { padding: var(--space-4); }
  .hero, .feature, .page, .foot { padding-left: var(--space-4); padding-right: var(--space-4); }
  .hero { padding-left: calc(var(--space-4) + var(--space-5)); }
  .hero::before { left: var(--space-3); }
  .hero__text::before { left: calc(-1 * var(--space-5) - var(--size-stroke-margin-path)); }
  .feature--band .feature__text, .feature--band .shot, .feature--band .flow, .feature--band .flow__note { padding-left: var(--space-4); padding-right: var(--space-4); }
}