/* Marble Studio (marblestudio.pro). Dark only. No build step.
   Layout, type scale and components follow Cruip Stellar (licensed); written fresh as plain CSS. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}
/* Metric-matched stand-in while Inter loads, so the swap does not move the text. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

:root {
  --bg: #0a0b0e;          /* near-black; the renders carry the color */
  --raise: #111318;       /* cards, table */
  --field: #161920;       /* inputs */
  --line: #23262e;
  --line-strong: #343945;
  --text: #eceef3;
  --soft: #c5cad4;        /* lead paragraphs */
  --muted: #9ba2af;       /* secondary text; >= 4.5:1 on --raise */
  --accent: #8bc5d4;      /* the ribbon blue of the mark: links, buttons, focus, form (10.3:1 on --bg) */
  --accent-dark: #5e9cac; /* the ribbon's darker tint, where the ground is light (the white button) */
  --radius: 1.5rem;
  --wrap: 72rem;
  --gutter: 1rem;
  --font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
  accent-color: var(--accent);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--font);
  letter-spacing: -0.017em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
.nowrap { white-space: nowrap; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 50;
  padding: 0.6rem 1rem; border-radius: 999px;
  background: #fff; color: #0a0b0e; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 0.75rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 640px) { :root { --gutter: 1.5rem; } }

/* ---------- Phase switch and empty slots (also inline in index.html's <head>) ----------
   <html data-phase="prelaunch"> until launch morning, then "launch". A link or form whose URL is still a #fill-
   slot is never shown, and neither is a news button while the form is unfilled. */
[data-phase="prelaunch"] .when-launch,
[data-phase="launch"] .when-prelaunch { display: none !important; }
a[href^="#fill-"], form[action^="#fill-"] { display: none !important; }
html:has(form[action^="#fill-"]) [data-cta-news] { display: none !important; }
.get__line:has(> a[href^="#fill-"]) { display: none !important; }

/* ---------- DOCS LINKS SWITCH ----------
   The next line hides every link into the manual (/docs/) on all five pages: top bar, footer, the 404 sentence.
   To show them, delete that one line and push. To hide them again, paste it back exactly. Nothing else changes. */
.docs-link { display: none !important; }

/* ---------- Type (Stellar scale) ---------- */
.h1, .h2, .h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.h1 { font-size: clamp(2.125rem, 1.35rem + 3vw, 3.5rem); line-height: 1.06; }
.h2 { font-size: clamp(1.875rem, 1.4rem + 2vw, 2.75rem); line-height: 1.12; }
.h3 { font-size: 1.25rem; line-height: 1.35; font-weight: 700; letter-spacing: -0.017em; }

/* Stellar's soft-edged heading gradient. Solid color first for browsers without background-clip text. */
.shine {
  color: #e2e8f0;
  background: linear-gradient(90deg, rgba(226, 232, 240, 0.72), #e2e8f0 50%, rgba(226, 232, 240, 0.72));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.08em;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent);
}

.lead { margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--soft); }

/* ---------- Buttons (Stellar .btn: white gradient pill + accent arrow) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 3rem; padding: 0 1.5rem;
  border: 0; border-radius: 999px;
  font: 600 1rem/1 var(--font); letter-spacing: -0.01em;
  color: #0f1115;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.84), #fff 50%, rgba(255, 255, 255, 0.84));
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.btn:hover { color: #0f1115; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08); }
.btn:active { transform: translateY(1px); }
.btn__arrow { color: var(--accent-dark); transition: transform 150ms ease; }
.btn:hover .btn__arrow { transform: translateX(2px); }
.btn--sm { min-height: 2.5rem; padding: 0 1rem; font-size: 0.9375rem; }
/* The secondary button: outlined, so the Pro button stays the first thing the eye lands on. */
.btn--ghost { color: var(--text); background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px #5a6070; }
.btn--ghost .btn__arrow { color: var(--accent); }

/* ---------- Header ---------- */
.top { position: relative; z-index: 10; }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
@media (min-width: 768px) { .top__row { min-height: 4.5rem; } }
/* The lockup is drawn, not typed: 32 px tall (190 px wide) when there is room. The nav never shrinks; the lockup
   gives way to it, scaling down in proportion, so the header never wraps or runs off the side at any width. */
.brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; text-decoration: none; }
.brand picture { display: contents; }
.brand__logo { display: block; width: 11.886rem; max-width: 100%; height: auto; }
.brand:hover .brand__logo { opacity: 0.85; }
.top__nav { display: flex; flex: none; align-items: center; gap: 0.25rem; }
.top__link {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.75rem;
  color: var(--soft); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
}
.top__link:hover { color: #fff; }
@media (max-width: 419px) {
  .top .btn--sm { padding: 0 0.875rem; }
  .top .btn--sm .btn__arrow { display: none; }
  .top__link { padding: 0 0.5rem; }
}
/* Below 365 px the lockup would be under ~120 px wide, so the <picture> swaps to the mark alone, 32 px. */
@media (max-width: 364px) { .brand__logo { width: 2rem; } }

/* ---------- Hero ---------- */
.hero { padding: 1.5rem 0 3.5rem; text-align: center; }
@media (min-width: 768px) { .hero { padding: 1.25rem 0 2rem; } }
.hero__title { max-width: 16em; margin-inline: auto; }
.hero .lead { max-width: 38rem; margin: 0.75rem auto 0; }
.hero__by { color: var(--muted); white-space: nowrap; }

/* The clip slot is sized before any media arrives (aspect-ratio + poster as background): no layout shift.
   Desktop: its height is what is left of the screen after the text and the form, so all of it fits. */
.clip {
  position: relative;
  width: min(100%, max(20rem, calc((100vh - 29.5rem) * 16 / 9)));
  width: min(100%, max(20rem, calc((100svh - 29.5rem) * 16 / 9)));
  aspect-ratio: 16 / 9;
  margin: 1.5rem auto 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #0d0f13 url("images/hero-poster.jpg") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 2.5rem 6rem -2rem rgba(139, 197, 212, 0.16);
}
@media (min-width: 768px) { .clip { margin-top: 1.75rem; border-radius: var(--radius); } }
.clip__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.clip__toggle {
  position: absolute; right: 0.75rem; bottom: 0.75rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.25rem; padding: 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px;
  background: rgba(10, 11, 14, 0.72); color: #fff;
  font: 500 0.8125rem/1 var(--font); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.clip__toggle:hover { background: rgba(10, 11, 14, 0.9); }
.clip__toggle[hidden] { display: none; }
.clip__toggle svg { width: 0.75rem; height: 0.75rem; fill: currentColor; }

/* ---------- The action block: date line or buttons, then the news form ---------- */
.get { max-width: 40rem; margin: 1.5rem auto 0; text-align: center; scroll-margin-top: 1.5rem; }
.get:focus { outline: none; }
.get__date { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; color: var(--text); }
.get__buy { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (min-width: 560px) { .get__buy { grid-template-columns: 1fr 1fr; align-items: start; } }
.get__option .btn { width: 100%; white-space: normal; text-align: center; padding-block: 0.6rem; }
.get__line { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted); }
.get__micro { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.signup { text-align: left; }
.signup__head { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--soft); text-align: center; }
.signup__row { display: flex; flex-direction: column; gap: 0.625rem; }
@media (min-width: 560px) { .signup__row { flex-direction: row; } }
.signup__input {
  flex: 1; min-width: 0; min-height: 3rem; padding: 0 1.1rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--field); color: var(--text);
  font: 400 1rem/1 var(--font);   /* 16 px: iOS does not zoom on focus */
}
.signup__input::placeholder { color: #8f96a3; opacity: 1; }
.signup__input:hover { border-color: #4a5060; }
.signup__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.signup__consent { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--muted); text-align: center; }
.signup__consent a { color: var(--soft); }
.signup__consent a:hover { color: #fff; }

/* ---------- Sections ---------- */
.section { padding: 3.5rem 0; }
@media (min-width: 768px) { .section { padding: 6rem 0; } }
.section__head { max-width: 44rem; margin: 0 auto 2.5rem; text-align: center; }
@media (min-width: 768px) { .section__head { margin-bottom: 3.5rem; } }
.section__head .lead { margin-top: 1rem; }
.section__cta { margin-top: 2.5rem; text-align: center; }

/* ---------- Proof blocks (Stellar "highlighted boxes": 7 + 5; a third card returns as the wide one) ---------- */
.proof { display: grid; gap: 1.25rem; }
@media (min-width: 768px) {
  .proof { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; }
  .card--wide { grid-column: span 12; }
  .card--7 { grid-column: span 7; }
  .card--5 { grid-column: span 5; }
}
.card {
  display: flex; flex-direction: column;
  margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--raise);
  overflow: hidden;
}
.card__media { position: relative; aspect-ratio: 16 / 9; background: #0d0f13; }
.card__media img, .card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The capture sits over its still and shows only once it really plays; a missing file leaves the still. */
.card__video { opacity: 0; transition: opacity 300ms ease; }
.card__video.is-live { opacity: 1; }
@media (min-width: 768px) { .card--7 .card__media, .card--5 .card__media { flex: 1 1 auto; } }
.card__body { padding: 1.25rem 1.25rem 1.5rem; }
@media (min-width: 768px) { .card__body { padding: 1.75rem 2rem 2rem; } }
.card__body p { margin: 0.5rem 0 0; color: var(--muted); }
.card__body code { color: var(--soft); font-size: 0.92em; }
@media (min-width: 960px) {
  .card--wide { flex-direction: row-reverse; align-items: stretch; }
  .card--wide .card__media { flex: 0 0 60%; aspect-ratio: auto; min-height: 22rem; }
  .card--wide .card__body { flex: 1; align-self: center; padding: 2.5rem; }
}

/* ---------- Free and Pro (Stellar pricing grid: highlighted column) ---------- */
.tiers__chip { display: block; width: auto; height: 1.5rem; }
.table-scroll { max-width: 52rem; margin-inline: auto; overflow-x: auto; border-radius: var(--radius); }
.tiers { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9375rem; line-height: 1.45; }
.tiers th, .tiers td { padding: 0.875rem 0.5rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
.tiers th:first-child { padding-left: 0.75rem; }
.tiers tbody th { font-weight: 500; color: var(--soft); }
.tiers td { color: var(--text); width: 30%; font-size: 0.875rem; line-height: 1.4; overflow-wrap: anywhere; }
/* Phones: 40 / 30 / 30, cells wrap, nothing scrolls sideways at 390 px. From 640 px: roomier. */
.tiers tbody th { width: 40%; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .table-scroll { max-width: 56rem; }
  .tiers th, .tiers td, .tiers th:first-child { padding: 0.75rem 1.25rem; }
}
.tiers thead th { padding-top: 1.25rem; padding-bottom: 1.25rem; border-bottom-color: var(--line-strong); }
.tiers thead th:first-child { vertical-align: bottom; font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
/* The Pro column: tinted and outlined in the accent, like Stellar's featured plan. */
.tiers th:nth-child(3), .tiers td:nth-child(3) {
  background: rgba(139, 197, 212, 0.06);
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
}
.tiers thead th:nth-child(3) {
  border-radius: 1rem 1rem 0 0;
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent);
}
.tiers tbody tr:last-child td:nth-child(3) {
  border-radius: 0 0 1rem 1rem;
  box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent);
}
.tiers tbody tr:last-child > * { border-bottom: 0; }
.yes, .no { display: inline-flex; align-items: center; }
.yes svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.no { color: #6b7280; }
.tiers__note { max-width: 52rem; margin: 1.25rem auto 0; color: var(--muted); font-size: 0.9375rem; text-align: center; }

/* ---------- Maker band ---------- */
.maker { text-align: center; }
.maker__inner {
  max-width: 52rem; margin-inline: auto; padding: 3rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: radial-gradient(60% 120% at 50% 0%, rgba(139, 197, 212, 0.09), transparent 70%), var(--raise);
}
@media (min-width: 768px) { .maker__inner { padding: 4rem 3rem; } }
.maker__line { max-width: 34rem; margin-inline: auto; text-wrap: balance; }
.maker__by { margin: 1rem 0 0; color: var(--muted); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; font-size: 0.9375rem; }
.foot__grid { display: flex; flex-direction: column; gap: 1.75rem; }
/* Flex, not a fixed 3-track grid: the Product column may be hidden by the docs-links switch, and the row must look
   the same with two or three children. */
@media (min-width: 768px) { .foot__grid { flex-direction: row; } .foot__grid > * { flex: 1 1 0; min-width: 0; } .foot__grid > :first-child { flex-grow: 2; } }
.foot__brand { margin: 0; font-weight: 700; }
.foot__by { color: var(--muted); font-weight: 500; }
.foot__small { margin: 0.4rem 0 0; color: var(--muted); }
.foot__title { margin: 0 0 0.6rem; font-size: 0.875rem; font-weight: 600; color: var(--text); }
.foot__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.foot__list a { color: var(--muted); text-decoration: none; }
.foot__list a:hover { color: #fff; text-decoration: underline; }

/* ---------- Plain pages: privacy, license, refunds, 404 ---------- */
.page { padding: 3rem 0 5rem; }
@media (min-width: 768px) { .page { padding: 5rem 0 7rem; } }
.page__inner { max-width: 44rem; margin-inline: auto; }
.page__head { text-align: center; margin-bottom: 2.5rem; }
.page--center { text-align: center; }
.page--center .lead { margin: 1rem auto 0; max-width: 34rem; }
.page__actions { margin-top: 2rem; }
.note-card {
  margin: 2rem auto 0; max-width: 34rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--line); border-radius: 1rem; background: var(--raise);
  color: var(--muted); font-size: 0.9375rem; text-align: left;
}
.note-card strong { color: var(--text); }

.prose { color: var(--soft); }
.prose h2 { margin: 2.5rem 0 0.75rem; font-size: 1.25rem; line-height: 1.35; color: var(--text); }
.prose p, .prose ul { margin: 0 0 1rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose strong { color: var(--text); }
.prose .updated { color: var(--muted); font-size: 0.9375rem; }

@media (max-width: 419px) {
  .top__row { min-height: 3.5rem; }
  .hero { padding-top: 0.75rem; }
  .hero__title { font-size: 2rem; }
  .hero .lead { font-size: 1.0625rem; line-height: 1.5; margin-top: 0.625rem; }
  .clip { margin-top: 1.125rem; }
  .get { margin-top: 1rem; }
  .get__date { font-size: 1rem; }
  .signup__row { gap: 0.5rem; }
  .signup__consent { margin-top: 0.5rem; font-size: 0.8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}