/* Shared structure for the three pricing pages. Each product stylesheet sets
   the tokens below; this file never sets a product colour itself. */

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

:root {
  --gutter: 16px;
  --max: 1180px;
  --radius: 14px;
  color-scheme: dark light;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}

img,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: var(--link);
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

.preview-ribbon {
  margin: 0;
  padding: 7px var(--gutter);
  background: var(--ribbon-bg);
  color: var(--ribbon-ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-align: center;
}

.preview-ribbon a {
  color: inherit;
}

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

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.brand svg {
  width: 30px;
  height: 30px;
  flex: none;
}

.site-nav ul {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav li > span,
.site-nav li > a {
  display: inline-block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.92rem;
  text-decoration: none;
}

.site-nav [aria-current="page"] {
  color: var(--ink);
  background: var(--surface);
  font-weight: 600;
}

@media (max-width: 560px) {
  .site-nav .nav-optional {
    display: none;
  }
}

/* ------------------------------------------------------------ hero and stage */

.hero {
  padding-top: 8px;
}

.hero__intro {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 24px;
  margin-bottom: 14px;
}

.hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.hero .lede {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
}

.stage {
  position: relative;
}

.stage__viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(74vh, calc(100vh - 230px));
  min-height: 320px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stage-bg);
  box-shadow: var(--stage-shadow);
}

.stage__poster,
.stage__poster img,
.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stage__poster img {
  object-fit: cover;
}

.stage__canvas {
  visibility: hidden;
}

.stage.is-live .stage__canvas {
  visibility: visible;
}

.stage.is-live .stage__poster {
  display: none;
}

/* Paper grain and vignette sit over the canvas as composited layers, so the
   per-frame canvas work never repaints them. */
.stage__grain,
.stage__viewport::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage__grain {
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-size: 384px 384px;
}

.stage__viewport::after {
  content: "";
  background: radial-gradient(ellipse at 50% 45%, transparent 45%, var(--vignette, rgba(0, 0, 0, 0.5)) 100%);
}

.stage__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
}

.stage__note {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.stage__controls {
  display: none;
  gap: 8px;
}

.stage.is-live .stage__controls {
  display: flex;
}

.control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--control-border);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--ink);
  font: 600 0.9rem var(--font-body);
  cursor: pointer;
}

.control:hover {
  border-color: var(--accent);
}

.control[disabled] {
  opacity: 0.45;
  cursor: default;
}

.control[hidden] {
  display: none;
}

.control svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.control[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}

/* On phones the stage runs edge to edge and stays inside one screen with
   its controls, so Rivet, the prices and the cause and effect share it. */
@media (max-width: 640px) {
  .hero {
    padding-top: 0;
  }

  .preview-ribbon {
    font-size: 0.68rem;
  }

  .site-header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .hero__intro {
    margin-bottom: 10px;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .hero .lede {
    font-size: 0.95rem;
  }

  /* The stage takes what the first screen has left after the page chrome
     and its controls, so the whole scene and its controls are visible
     without scrolling, including under mobile browser toolbars (svh). */
  .stage__viewport {
    width: calc(100% + 2 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
    aspect-ratio: auto;
    height: clamp(340px, calc(100svh - 268px), 600px);
    max-height: none;
    min-height: 0;
    border-radius: 0;
  }

  .stage__bar {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .stage__controls {
    justify-content: space-between;
  }

  .control {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 10px;
    font-size: 0.85rem;
  }
}

/* On the narrowest phones the labels need the room more than the icons do. */
@media (max-width: 380px) {
  .control svg {
    display: none;
  }

  .control {
    padding: 0 6px;
  }
}

/* ------------------------------------------------------------ offer */

.section {
  padding-top: 56px;
}

.section h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.6vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section > .wrap > p,
.section .measure {
  max-width: 62ch;
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 820px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.plan h3 {
  margin: 0;
  font-size: 1.1rem;
}

.plan .price {
  margin: 4px 0;
  font-family: var(--font-mono);
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--price);
}

.plan .price small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.plan p {
  margin: 0;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 700 0.98rem var(--font-body);
  cursor: pointer;
}

.button--primary {
  background: var(--accent);
  color: var(--on-accent);
}

.button .tag {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  font: 600 0.68rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.help-list {
  margin: 14px 0 0;
  padding-left: 1.2em;
}

.help-list li {
  margin: 6px 0;
}

.fine {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.site-footer {
  margin-top: 64px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.site-footer p {
  margin: 4px 0;
}

/* ------------------------------------------------------------ preview dialog */

.preview-dialog {
  width: min(460px, calc(100vw - 2 * var(--gutter)));
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--ink);
}

.preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

.preview-dialog h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
}

.preview-dialog p {
  margin: 0 0 12px;
}

.preview-dialog code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.preview-dialog form {
  margin: 8px 0 0;
  text-align: right;
}