/* Mise marketing page — one screen, from Figma "Website" 95:5741.
 *
 * The Figma frame is 1728px wide. Every size below is written as a plain
 * clamp(min, floor + slope, Figma value): it lands exactly on the Figma number
 * at 1728px and eases down from there.
 *
 * Deliberately boring CSS. An earlier version multiplied a custom property to
 * get the same curve — calc(60 * var(--u)) — and some browsers dropped those
 * declarations, which left the subheading with no width and running the full
 * width of the window. Nothing here does arithmetic on a custom property.
 *
 * There is no animation on this page. No transitions, no transforms, no
 * scroll effects. Colours are tokens only — see design-system/tokens.css.
 */

/* ---- Fonts. Self-hosted so the page never waits on a third party. ---- */
@font-face {
  font-family: "Parry";
  src: url("fonts/Parry-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block; /* 11 KB — better to wait than to flash Georgia */
}
@font-face {
  font-family: "Parry";
  src: url("fonts/Parry-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  min-height: 100svh;
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  color: var(--color-site-ink);
  background-color: var(--color-site-bg);
  /* The warm wash starts 22% down the page and deepens to the bottom edge —
     exactly the Figma rectangle at y=348 of 1580. */
  background-image: linear-gradient(
    to top,
    var(--color-hero-from) 0%,
    var(--color-hero-via) 36.129%,
    var(--color-hero-to) 72.257%
  );
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 78%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wider gamut where the display has one — same colours, more saturation headroom. */
@supports (background-image: linear-gradient(in oklab, red, blue)) {
  body {
    background-image: linear-gradient(
      to top in oklab,
      var(--color-hero-from) 0%,
      var(--color-hero-via) 36.129%,
      var(--color-hero-to) 72.257%
    );
  }
}

/* ---- Header mark — 40px at y=24 in the Figma ---- */
.top {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: clamp(14px, 11.09px + 0.747vw, 24px);
}
.brand {
  display: flex;
  color: var(--color-site-ink);
  opacity: 0.32;
}
.brand:hover { opacity: 0.5; }
.brand-mark {
  display: block;
  width: clamp(24px, 19.34px + 1.196vw, 40px);
  height: clamp(24px, 19.34px + 1.196vw, 40px);
}

/* ---- Hero ---- */
.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: clamp(56px, 37.35px + 4.783vw, 120px);
}

/* Figma: Parry Regular 60/72, tracking -1.5 */
.hero-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: clamp(34px, 26.42px + 1.943vw, 60px);
  line-height: 1.2;
  letter-spacing: clamp(-1.5px, -0.661px - 0.049vw, -0.85px);
  color: var(--color-site-ink);
  padding-inline: 20px;
  text-wrap: balance;
}

/* Figma: Inter Regular 16/24 in a 540px column */
.hero-sub {
  width: min(540px, 100% - 40px);
  margin-top: clamp(14px, 12.25px + 0.448vw, 20px);
  font-size: clamp(15px, 14.71px + 0.075vw, 16px);
  line-height: 1.5;
  color: var(--color-site-body);
  text-wrap: pretty;
}

/* Figma: 44 tall, radius 12, 8 gap, Inter Medium 15. The height stays 44px at
   every width — that is the smallest comfortable tap target. */
.download-row {
  margin-top: clamp(24px, 21.67px + 0.598vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.download {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--color-site-ink);
  color: var(--color-site-ink-fill);
  font-size: clamp(14px, 13.71px + 0.075vw, 15px);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  text-decoration: none;
}
.download--beta {
  background: transparent;
  color: var(--color-site-ink);
  box-shadow: inset 0 0 0 1px var(--color-site-ink);
}
.download-row:not(:has([data-download-stable]:not([hidden]))) .download--beta {
  background: var(--color-site-ink);
  color: var(--color-site-ink-fill);
  box-shadow: none;
}
.download-mark { display: block; width: 18px; height: 18px; }
.download[hidden] { display: none !important; }
.download:hover { opacity: 0.88; }
.download:focus-visible {
  outline: 2px solid var(--color-site-ink);
  outline-offset: 3px;
}

/* Figma: Inter Regular 13/19.5 with a 12px mark */
.beta {
  margin-top: clamp(12px, 11.42px + 0.149vw, 14px);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: clamp(12px, 11.71px + 0.075vw, 13px);
  line-height: 1.5;
  color: var(--color-site-faint);
}
.beta-mark { display: block; width: 12px; height: 12px; margin-right: 2px; }

/* ---- The app shot.
   Three Figma exports, each cropped to the exact edge of its own layer and then
   laid back out at its Figma page position: the card, the inspector that hangs
   off its right edge, and the sidebar that sits on its left. Figma bakes the
   page background into an export, so a layer must never carry its own shadow
   bleed — the corners and the sidebar shadow below are the real ones, in CSS.
   The percentages come straight from the Figma coordinates. Do not round them.
   Radius and shadow repeat in cqw so they shrink with the shot; the plain px
   line before each one is what a browser without container units keeps. ---- */
.shot-bleed {
  width: 100%;
  margin-top: clamp(44px, 35.84px + 2.093vw, 72px);
  /* The shot has a fixed top size, so on a narrower page it must take a bigger
     share — but the margin has to grow too, or the picture ends up nearly edge
     to edge on a tablet while the headline sits in a narrow column. */
  padding-inline: clamp(16px, 6.5vw, 140px);
  display: flex;
  justify-content: center;
  overflow: clip;
}
.shot {
  position: relative;
  width: min(1006.667px, 100%);
  aspect-ratio: 1006.667 / 726.333;
  flex: none;
  container-type: inline-size;
}
.shot img {
  position: absolute;
  height: auto;
  display: block;
}
.shot-panel {
  left: 1.39073%;
  top: 0;
  width: 96.45695%;
  border-radius: 12px;
  border-radius: 1.19205cqw;
}
.shot-inspector {
  left: 81.25828%;
  top: 7.70997%;
  width: 18.74172%;
  border-radius: 8px;
  border-radius: 0.79470cqw;
}
.shot-nav {
  left: 0;
  top: 9.36071%;
  width: 16.09272%;
  border-radius: 8px;
  border-radius: 0.79470cqw;
  /* 53px -19px 24.4px in the Figma — it falls right, across the card */
  box-shadow: 53px -19px 24.4px var(--color-site-shot-shadow);
  box-shadow: 5.26490cqw -1.88742cqw 2.42384cqw var(--color-site-shot-shadow);
}

/* ---- Footer. Figma: crown, Parry SemiBold 15.31, Inter Medium 12. ---- */
.foot {
  margin-top: auto;
  padding-top: clamp(90px, 63.47px + 6.801vw, 181px);
  padding-bottom: clamp(32px, 27.34px + 1.196vw, 48px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-site-foot);
  mix-blend-mode: hard-light;
}
.foot-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.foot-links {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.foot-mark {
  width: 19px;
  height: 18px;
  align-self: center;
  margin-right: 4px;
}
.foot-name {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(14px, 13.62px + 0.098vw, 15.31px);
  line-height: 1.5;
}
.foot-copy,
.foot-sep,
.foot-link {
  font-size: clamp(11px, 10.71px + 0.075vw, 12px);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}
.foot-sep { opacity: 0.55; }
.foot-link {
  color: inherit;
  text-decoration: none;
}
.foot-link:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* ---- Roadmap (stamped from site/roadmap.md at build time) ---- */
.roadmap-item {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(15px, 14.71px + 0.075vw, 16px);
  line-height: 1.5;
  margin: 1.5rem 0 0.25rem;
  color: var(--color-site-ink);
}
.roadmap-list {
  margin: 0 0 0.25rem;
  padding-left: 1.15rem;
  font-size: clamp(15px, 14.71px + 0.075vw, 16px);
  line-height: 1.5;
  color: var(--color-site-body);
}
.roadmap-list li + li { margin-top: 0.35em; }

/* ---- Privacy / short legal page (not in the Figma landing frame) ---- */
body.page {
  padding-bottom: 0;
  background-attachment: fixed;
}
.legal {
  width: min(40rem, 88vw);
  margin: clamp(48px, 36px + 2vw, 80px) auto 0;
  color: var(--color-site-ink);
}
body.page .legal {
  width: min(540px, 100% - 40px);
  margin-top: clamp(56px, 37.35px + 4.783vw, 96px);
  flex: 1;
}
.legal-title {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(28px, 24px + 1vw, 40px);
  line-height: 1.2;
  margin-bottom: 1rem;
}
body.page .legal-title {
  font-weight: var(--font-weight-regular);
  font-size: clamp(34px, 26.42px + 1.943vw, 48px);
  letter-spacing: clamp(-1px, -0.44px - 0.033vw, -0.6px);
  text-align: center;
  text-wrap: balance;
}
.legal-lead,
.legal p {
  font-size: clamp(15px, 14px + 0.2vw, 17px);
  line-height: 1.55;
  margin-bottom: 1rem;
  opacity: 0.85;
}
body.page .legal-lead {
  text-align: center;
  text-wrap: pretty;
  color: var(--color-site-body);
  opacity: 1;
  margin-bottom: clamp(24px, 20px + 1vw, 40px);
}
body.page .legal p {
  font-size: clamp(15px, 14.71px + 0.075vw, 16px);
  line-height: 1.5;
  opacity: 1;
  color: var(--color-site-body);
}
.legal-h {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: clamp(18px, 16px + 0.4vw, 22px);
  margin: 2rem 0 0.5rem;
}
body.page .legal-h {
  font-size: clamp(12px, 11.71px + 0.075vw, 13px);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
  color: var(--color-site-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: clamp(28px, 24px + 1vw, 36px) 0 0.5rem;
}
.legal a {
  color: var(--color-site-ink);
  text-underline-offset: 0.15em;
}
.legal-updated {
  margin-top: 2rem;
  opacity: 0.55;
  font-size: 0.9em;
}


/* ---------- Pricing (/pro) and purchase success (/thanks) ---------- */
body.page .pricing,
body.page .thanks { width: min(680px, 100% - 40px); }

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: clamp(24px, 20px + 1vw, 40px) 0;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 14px;
  background: var(--color-site-card);
  box-shadow: 0 0 0 1px var(--color-site-hairline);
}
.plan--best {
  box-shadow: 0 0 0 1.5px var(--color-site-ink), 0 6px 20px var(--color-site-shadow);
}
.plan-tag {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--color-site-ink);
  color: var(--color-site-ink-fill);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
}
.plan-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 16px + 0.3vw, 20px);
  font-weight: var(--font-weight-medium);
  color: var(--color-site-ink);
}
.plan-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan-amount {
  font-family: var(--font-display);
  font-size: clamp(30px, 26px + 1vw, 40px);
  line-height: 1.1;
  color: var(--color-site-ink);
}
.plan-once { font-size: 13px; color: var(--color-site-faint); }
.plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-site-body);
}
.plan-list li { padding-left: 18px; position: relative; }
.plan-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--color-site-faint);
}
.plan .plan-buy {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--color-site-ink);
  color: var(--color-site-ink);
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.plan .plan-buy:hover { opacity: 0.7; }
.plan .plan-buy--primary {
  background: var(--color-site-ink);
  color: var(--color-site-ink-fill);
  box-shadow: none;
}

.steps {
  margin: clamp(24px, 20px + 1vw, 40px) 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-site-body);
}
.step-n {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-site-ink);
  color: var(--color-site-ink-fill);
  font-size: 13px;
}
.step code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--color-site-code);
  font-size: 0.92em;
}