/* One stylesheet for the inner marketing pages and the app. No framework, no CDN.
 *
 * The palette matches ls.css, the vendored Lemon Squeezy sheet the home page uses: Inter, near
 * black on white, IBM blue on every action, black outline secondaries, lightly rounded corners.
 * Inter is subset and served from /fonts, the same files ls.css loads, so the two stylesheets never
 * disagree on a letterform. */

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #121217;
  --ink-soft: #5c5c6b;
  --line: #e8e8ed;
  --paper: #ffffff;
  --paper-soft: #f7f7f8;
  --paper-sunk: #f1f1f4;

  /* IBM blue does every action, as in ls.css. Violet is kept only for the eyebrow label, where
     Lemon Squeezy uses it too. */
  --accent: #0f62fe;
  --accent-ink: #0b4ed6;
  --accent-soft: #e7efff;
  --accent-line: #bcd3ff;
  --eyebrow: #5423e7;
  --pink: #f42ad3;
  --pink-soft: #fdeafa;
  --yellow: #ffc233;
  --yellow-soft: #fff6e0;
  --lilac: #cf75ff;
  --lilac-soft: #f8edff;

  --warn: #9a3412;
  --warn-soft: #fff5ed;
  --warn-line: #f3d6c0;
  --ok: #14612f;
  --ok-soft: #eaf6ee;
  --ok-line: #cbe7d5;
  --on-accent: #ffffff;
  --canary-soft: #fff8d8;
  --canary-line: #efe0a0;
  --watermark: rgba(84, 35, 231, 0.07);
  /* About two percent off the paper. A sensor reading pixel values separates this from the
     background without trouble; a person sees an empty page unless they go looking. Raising it
     even a few points makes the field obvious at large sizes, which defeats the point. */
  --noise-ink: #f6f7f9;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --pill: 999px;
  --wide: 1200px;
  /* Line length for running prose. Anything wider is hard to read and looks like a wall. */
  --measure: 66ch;
  --font:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgba(18, 18, 23, 0.04), 0 12px 32px rgba(18, 18, 23, 0.06);
}

/* The only other theme. Everything above is tokenised, so this block is the whole of dark mode. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f2f2f5;
    --ink-soft: #a0a0b0;
    --line: #2a2a33;
    --paper: #0f0f14;
    --paper-soft: #17171e;
    --paper-sunk: #1d1d26;
    --accent: #5b8dff;
    --accent-ink: #7aa2ff;
    --accent-soft: #10203f;
    --accent-line: #263a63;
    --eyebrow: #a98bff;
    --pink: #ff7ae6;
    --pink-soft: #2a1426;
    --yellow: #ffcf5c;
    --yellow-soft: #2a2213;
    --lilac: #dda2ff;
    --lilac-soft: #241a2e;
    --warn: #f0a97a;
    --warn-soft: #2a1d14;
    --warn-line: #4a3421;
    --ok: #6cc98c;
    --ok-soft: #14241a;
    --ok-line: #24402e;
    --on-accent: #12081f;
    --canary-soft: #2a2614;
    --canary-line: #4a4526;
    --watermark: rgba(169, 139, 255, 0.09);
    --noise-ink: #14141b;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

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

/* Type.
 *
 * The display sizes are fluid between a phone and a wide monitor, so the hero is the loudest thing
 * on the page at every width rather than only at the one the design was drawn at. */

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  margin: 0 0 14px;
  letter-spacing: -0.025em;
  font-weight: 600;
}

h1 {
  font-size: clamp(40px, 6.2vw, 74px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 650;
}

h2 {
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 650;
}

h3 {
  font-size: 20px;
  line-height: 1.3;
}

h4 {
  font-size: 16px;
  line-height: 1.35;
}

/* Section label. Says what part of the page this is without spending a sentence on it. */
.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin: 0 0 14px;
}

.eyebrow.pink {
  color: var(--pink);
}
.eyebrow.plain {
  color: var(--ink-soft);
}

p {
  margin: 0 0 18px;
}

small,
.small {
  font-size: 14px;
  color: var(--ink-soft);
}

.lede {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 58ch;
}

code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--paper-sunk);
  padding: 2px 6px;
  border-radius: 6px;
}

/* Layout */

.wrap {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 24px;
}

/* A narrow column that still starts at the page gutter. Shrinking the container instead would
   re-centre the text under a full-width header, which is what made these pages look misaligned. */
.wrap.narrow > * {
  max-width: 760px;
}

/* Running prose, wherever it sits. */
.measure {
  max-width: var(--measure);
}

section {
  padding: 72px 0;
}

@media (min-width: 900px) {
  section {
    padding: 104px 0;
  }
}

/* Alternating ground, so a long page reads as parts rather than one column. Colour does this, not
   a hairline: a rule across a page this wide reads as a seam. */
.band {
  background: var(--paper-soft);
}

.band.violet {
  background: var(--accent-soft);
}

.grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 720px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

th,
td {
  text-align: left;
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-weight: 600;
}

.scroll-x {
  overflow-x: auto;
}

/* Status */

.tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--pill);
  background: var(--paper-sunk);
  color: var(--ink-soft);
  border: 1px solid transparent;
}

.tag.ok {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--ok-line);
}

.tag.warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: var(--warn-line);
}

.tag.accent {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-line);
}

.notice {
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 15px;
}

.notice.warn {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.hidden {
  display: none;
}

/* The slide image and the decoy block, shared by the demo and the two presenter windows. */

.slide {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper);
}

.slide img {
  display: block;
  width: 100%;
  height: auto;
}

.decoys {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--paper);
}

.decoys h4 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  font-weight: 600;
}

.decoys p {
  margin: 0 0 10px;
}

.decoys p:last-child {
  margin-bottom: 0;
}

/* The demo sits on a tinted stage so the slide reads as a screen being shared, not as a figure. */
.stage {
  background: linear-gradient(160deg, var(--accent-soft), var(--lilac-soft));
  border-radius: var(--radius-lg);
  padding: 20px;
}

@media (min-width: 900px) {
  .stage {
    padding: 36px;
  }
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.steps li {
  counter-increment: step;
  margin-bottom: 18px;
  padding-left: 52px;
  position: relative;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* A list that reads as an inventory rather than as prose. */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: 32px;
  color: var(--ink);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 14px;
  border: solid var(--accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}

/* A colour block at the top of a card. Four of them across a row is what tells the reader these
   are different things; an icon set would say the same thing and cost four assets. */
.chip {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 16px;
  background: var(--accent);
}

.chip.pink {
  background: var(--pink);
}
.chip.yellow {
  background: var(--yellow);
}
.chip.lilac {
  background: var(--lilac);
}

/* Header and footer */

header.site {
  position: sticky;
  top: 0;
  background: var(--paper);
  z-index: 5;
  border-bottom: 1px solid var(--line);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 72px;
}

/* On a phone the nav takes its own row rather than running off the edge. A menu button would need
   script on every page for four links. */
@media (max-width: 760px) {
  header.site .wrap {
    height: auto;
    flex-wrap: wrap;
    padding-block: 14px;
    gap: 12px 18px;
  }

  nav.site {
    margin-left: 0;
    width: 100%;
    gap: 18px;
  }
}

.brand {
  font-family: var(--display);
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
  font-size: 20px;
}

nav.site {
  margin-left: auto;
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

nav.site a:not(.btn) {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

nav.site a:not(.btn):hover,
nav.site a:not(.btn)[aria-current="page"] {
  color: var(--ink);
}

footer.site {
  border-top: 1px solid var(--line);
  padding: 56px 0 48px;
  color: var(--ink-soft);
  font-size: 15px;
}

footer.site .cols {
  display: grid;
  gap: 32px;
  margin-bottom: 40px;
}

@media (min-width: 720px) {
  footer.site .cols {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

footer.site .foot-head {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 12px;
  font-weight: 600;
}

footer.site nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

footer.site a {
  color: var(--ink-soft);
  text-decoration: none;
}

footer.site a:hover {
  color: var(--ink);
}

footer.site .legal {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  font-size: 14px;
}

/* Docs: a table of contents beside the text, both starting at the page gutter. A centred column
   under a full-width header has nothing to line up with, which is what made this page look wrong. */
.wrap.docs {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .wrap.docs {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 64px;
  }

  .docs .toc {
    position: sticky;
    top: 96px;
  }
}

.docs .toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}

.docs .toc a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 15px;
}

.docs .toc a:hover {
  color: var(--ink);
  border-left-color: var(--accent);
}

.docs .body {
  max-width: 74ch;
}

.docs .body h2 {
  font-size: 30px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}

.docs .body h2:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

/* Controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.1s ease;
}

.btn:hover {
  background: var(--accent-ink);
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}

.btn.ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn.small {
  padding: 7px 14px;
  font-size: 14px;
}

input,
select,
textarea {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus,
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 6px;
}

.field {
  margin-bottom: 16px;
}

.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* Cards and tables */

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--paper);
}

.card h3 {
  margin-top: 0;
}

.card p:last-child {
  margin-bottom: 0;
}

.price {
  font-family: var(--display);
  font-size: 44px;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.price span {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* A plan card. The tag carries the offer so the card needs no sentence about it, and the slot is
   kept even when there is no tag so the plan names line up across the row. */
.card.plan {
  display: flex;
  flex-direction: column;
}

.card.plan .tag-slot {
  min-height: 26px;
  margin-bottom: 10px;
}

.card.plan .btn {
  margin-top: auto;
}

.card.lead {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* The hero: one centred column, because the headline is the page's loudest thing and a column
   beside it takes away the width the headline needs. */
.hero {
  text-align: center;
  padding-top: 24px;
}

.hero h1 {
  max-width: 17ch;
  margin-inline: auto;
}

.hero .lede {
  margin-inline: auto;
  margin-top: 24px;
}

.hero .row {
  justify-content: center;
  margin-top: 32px;
}

.hero .small {
  margin-top: 18px;
}

/* Four short facts under the call to action, in place of a panel: at this width a panel beside the
   headline costs more than it says. */
.strip {
  list-style: none;
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  font-size: 15px;
  color: var(--ink-soft);
}

.strip li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.strip li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--pill);
  background: var(--accent);
  flex: none;
}

.facts {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  background: var(--paper);
}

.facts h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 0 0 14px;
  font-weight: 600;
}

.facts ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.facts li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.facts li:first-child {
  border-top: 0;
  padding-top: 0;
}

/* The closing call to action: one dark block so the page ends on the product rather than on the
   footer's link list. */
.cta {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  text-align: center;
}

@media (min-width: 900px) {
  .cta {
    padding: 72px 48px;
  }
}

.cta h2 {
  color: var(--paper);
  max-width: 24ch;
  margin-inline: auto;
}

/* Fixed, not tokenised: this block is near black in both themes, so a token that flips with the
   theme would put dark grey text on it. */
.cta p {
  color: #b9b9c6;
  max-width: 52ch;
  margin-inline: auto;
}

.cta .btn.ghost {
  background: transparent;
  color: var(--paper);
  border-color: #3a3a46;
}

.cta .btn.ghost:hover {
  background: #22222b;
  border-color: #55555f;
}

.cta .row {
  justify-content: center;
}

/* A quote or a note in the founder's voice. Big text, no card: it is the one place on the site
   that is a person talking. */
.voice {
  font-family: var(--display);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 24ch;
}

.voice + p {
  max-width: var(--measure);
}