/* CraftPages website. Warm paper, ink and the terracotta of the logo. */
:root {
  --paper: #faf6f0;
  --paper-2: #f3ece2;
  --sand: #efe4d6;
  --ink: #1b1c20;
  --ink-soft: #4a4640;
  --muted: #6b635a;
  --line: #e4d9cb;
  --clay: #c6532d;
  /* Clay dark enough for small text and for white on it (5.8:1). The logo's clay stays for large type and drawings. */
  --clay-ink: #ad4422;
  --clay-dark: #8a3518;
  --clay-soft: #f6e1d7;
  --on-clay: #ffffff;
  --green: #1e8e3e;

  --serif: 'Young Serif', Georgia, serif;
  --sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --radius: 14px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #181512;
    --paper-2: #1f1b17;
    --sand: #2a241e;
    --ink: #f3ece3;
    --ink-soft: #d5ccc1;
    --muted: #a99f93;
    --line: #342d26;
    --clay: #e0714a;
    --clay-ink: #e0714a;
    --clay-dark: #ef8a65;
    --clay-soft: #3a241a;
    --on-clay: #1b1410;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

::selection {
  background: var(--clay-soft);
  color: var(--ink);
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--clay-ink);
  text-underline-offset: 0.18em;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 400;
  line-height: 1.12;
}

h1,
h2 {
  font-family: var(--serif);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(30px, 4.4vw, 46px);
}

h3 {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 600;
}

h1 em,
h2 em {
  color: var(--clay);
  font-style: normal;
}

p {
  margin: 0 0 14px;
}

code,
.mono {
  font-family: var(--mono);
  font-size: 0.88em;
}

.wrap {
  width: min(1120px, 100% - 32px);
  margin: 0 auto;
}

.narrow {
  width: min(760px, 100% - 32px);
}

.center {
  text-align: center;
}

/* ---------- Buttons, bits ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 16px var(--sans);
  text-decoration: none;
  transition:
    transform 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--ink);
}

.btn--primary {
  border-color: var(--clay-ink);
  background: var(--clay-ink);
  color: var(--on-clay);
}

.btn--primary:hover {
  box-shadow: 0 3px 0 var(--clay-dark);
}

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

.btn--small {
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}

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

.fine {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.lead {
  max-width: 600px;
  color: var(--ink-soft);
  font-size: 19px;
}

.center .lead {
  margin-inline: auto;
}

.sticker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 6px 14px;
  border: 1.5px dashed var(--clay);
  border-radius: 999px;
  color: var(--clay-ink);
  font: 500 13px var(--mono);
  transform: rotate(-2deg);
}

.sticker__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay);
}

.muted-note {
  color: var(--muted);
  font-size: 15px;
}

.doodle {
  color: var(--ink);
}

/* ---------- Header / footer ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px);
}

.site-header__inner,
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__inner {
  height: 68px;
}

.logo {
  display: flex;
}

.logo img {
  display: block;
  width: 150px;
  height: auto;
}

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

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

.site-nav a:not(.btn):hover {
  color: var(--clay-ink);
}

/* Features, Compare and FAQ scroll the home page; Blog and Docs are their own pages. A hairline keeps the two apart. */
.site-nav__page {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.site-nav__page::before {
  content: '';
  width: 1px;
  height: 18px;
  background: var(--line);
}

.site-nav a[aria-current='page'] {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
}

.site-footer {
  padding: 30px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-footer nav {
  display: flex;
  gap: 20px;
}

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

/* ---------- Hero ---------- */
.hero {
  padding: 80px 0 96px;
  overflow: hidden;
}

.hero__text {
  max-width: 860px;
}

.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(40px, 6.6vw, 76px);
}

.hero h1 em {
  display: block;
}

.hero__aside {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Demo: a working copy of the app window ---------- */
.demo {
  position: relative;
  margin-top: 64px;
  scroll-margin-top: 84px;
}

.demo__hint {
  position: absolute;
  top: -46px;
  left: max(250px, 24%);
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
  color: var(--clay);
  font: 400 20px var(--serif);
  transform: rotate(-2deg);
  transition: opacity 0.3s;
  pointer-events: none;
}

.demo__hint.is-gone {
  opacity: 0;
}

.doodle--arrow {
  width: 64px;
  height: 48px;
  margin-bottom: -34px;
}

.demo__note,
.demo__done {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.demo__note strong {
  color: var(--ink-soft);
  font-weight: 600;
}

.demo__done {
  margin-top: 8px;
  color: var(--ink);
  font-size: 15px;
}

.demo__done a {
  font-weight: 600;
}

/* The window follows the app's own look (system font, its colors), so it reads as the product. */
.app,
.proposal {
  --a-bg: #ffffff;
  --a-side: #f7f7f9;
  --a-text: #1b1c1f;
  --a-muted: #6c707a;
  --a-line: #e6e7eb;
  --a-accent: #3d5afe;
  --a-accent-soft: #eaeeff;
  --a-warn: #b06000;
}

.app {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 14px;
  background: var(--a-bg);
  color: var(--a-text);
  box-shadow:
    0 2px 0 color-mix(in srgb, var(--ink) 10%, transparent),
    0 22px 48px -24px rgb(90 40 20 / 0.32);
  overflow: hidden;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  text-align: left;
}

.app__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px 14px;
  border-right: 1px solid var(--a-line);
  background: var(--a-side);
}

.app__lights {
  display: flex;
  gap: 7px;
  padding: 2px 4px 6px;
}

.app__lights i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5f57;
}

.app__lights i:nth-child(2) {
  background: #febc2e;
}

.app__lights i:nth-child(3) {
  background: #28c840;
}

.app__brand {
  width: 104px;
  height: auto;
  margin: 2px 6px 4px;
}

.app__project {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: 1px solid var(--a-line);
  border-radius: 8px;
  background: var(--a-bg);
}

.app__project b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #f1e4d3;
  color: #7a4a22;
}

.app__project span {
  display: flex;
  flex-direction: column;
}

.app__project small {
  color: var(--a-muted);
  font-size: 11px;
}

.app__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app__nav span {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--a-text);
}

.app__nav svg {
  width: 17px;
  height: 17px;
  color: var(--a-muted);
}

.app__nav .is-on {
  background: var(--a-accent-soft);
  color: var(--a-accent);
  font-weight: 600;
}

.app__nav .is-on svg {
  color: var(--a-accent);
}

.app__publish {
  margin-top: auto;
  padding: 9px;
  border: 0;
  border-radius: 8px;
  background: var(--a-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.app__publish:disabled {
  background: #2e7d4f;
  cursor: default;
}

.app__publish.is-nudged {
  animation: nudge 1.4s ease-out 2;
}

@keyframes nudge {
  30% {
    box-shadow: 0 0 0 6px rgb(61 90 254 / 0.25);
  }
}

.app__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app__top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--a-line);
}

.app__title {
  margin-right: auto;
  font-weight: 600;
}

.app__drafts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--a-text);
  font-size: 12.5px;
}

.app__drafts i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a-warn);
}

.app__saved {
  color: var(--green);
  font-size: 12.5px;
}

.app__btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--a-line);
  border-radius: 7px;
  background: var(--a-bg, #fff);
  color: var(--a-text, #1b1c1f);
  font: 500 12.5px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  cursor: pointer;
}

/* Save all: green while there's something to save, grey when the page matches the file. */
.app__btn--save {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.app__btn--save:not(:disabled) {
  animation: ready 0.35s ease-out;
}

@keyframes ready {
  50% {
    transform: scale(1.06);
  }
}

.app__btn--save:disabled {
  border-color: var(--a-line);
  background: #eef0f3;
  color: #a2a6ae;
  cursor: default;
}

.app__canvas {
  position: relative;
  flex: 1;
  padding: 18px;
  background: #eceef2;
}

/* The imaginary site inside the editor. */
.bakery {
  min-height: 100%;
  padding: 18px 26px 26px;
  border-radius: 6px;
  background: #fbf3e6;
  color: #3b2414;
  font-family: var(--serif);
}

.bakery__nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
  font: 13px var(--sans);
}

.bakery__nav strong {
  margin-right: auto;
  font: 17px var(--serif);
}

.bakery__pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: #3b2414;
  color: #fbf3e6;
}

.bakery__hero {
  max-width: 560px;
  margin-bottom: 28px;
}

.bakery__title {
  margin: 0 0 10px;
  font-size: clamp(24px, 3.2vw, 38px);
  line-height: 1.1;
}

.bakery__hero .bakery__lead {
  margin: 0 0 16px;
  color: #6d4f39;
  font: 15px/1.5 var(--sans);
}

.bakery .bakery__cta {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  background: #b5532a;
  color: #fff;
  font: 600 14px var(--sans);
}

.bakery__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.bread {
  padding: 10px 10px 12px;
  border-radius: 10px;
  background: #fffaf2;
  box-shadow: 0 1px 0 rgb(59 36 20 / 0.12);
}

.bread .bread__name {
  margin: 8px 0 2px;
  color: #3b2414;
  font: 15px var(--serif);
}

.bread p {
  margin: 0;
  color: #8a6a52;
  font: 13px var(--sans);
}

.bread__img {
  display: block;
  height: 64px;
  border-radius: 7px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 60%, #c98a4f 0 60%, transparent 62%),
    radial-gradient(ellipse 50% 30% at 50% 45%, #e0b07a 0 55%, transparent 57%),
    #f1dfc5;
}

.bread__img--2 {
  background:
    radial-gradient(ellipse 55% 48% at 50% 58%, #7c5233 0 60%, transparent 62%),
    radial-gradient(circle at 40% 45%, #d9b98f 0 3px, transparent 4px),
    radial-gradient(circle at 60% 52%, #d9b98f 0 3px, transparent 4px),
    #eadcc8;
}

.bread__img--3 {
  background:
    radial-gradient(circle at 35% 55%, #b87333 0 16px, transparent 17px),
    radial-gradient(circle at 65% 50%, #c9844a 0 15px, transparent 16px),
    #f3e3cc;
}

/* Editor affordances, drawn like the app's. */
[data-demo-edit] {
  border-radius: 3px;
  cursor: text;
  outline-offset: 3px;
}

[data-demo-edit]:hover {
  outline: 1px dashed rgb(61 90 254 / 0.7);
}

[data-demo-edit]:focus,
[data-demo-edit]:focus-visible {
  outline: 2px solid #3d5afe;
}

[data-demo-edit].is-changed:not(:focus) {
  outline: 1px solid #f5a623;
}

[data-demo-item].is-active {
  outline: 2px dashed rgb(61 90 254 / 0.8);
  outline-offset: 4px;
}

[data-demo-item].is-new {
  box-shadow: 0 0 0 1px var(--green);
}

.tools,
.itembar {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 8px;
  font: 12px -apple-system, BlinkMacSystemFont, sans-serif;
}

.tools {
  background: #1b1c1f;
  color: #fff;
}

.tools > * {
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
}

.tools > *:hover {
  background: rgb(255 255 255 / 0.14);
}

.itembar {
  border: 1px solid #d9dbe1;
  background: #fff;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}

.itembar svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.itembar button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: #1b1c1f;
  font-size: 14px;
  cursor: pointer;
}

.itembar button:hover:not(:disabled) {
  background: #eef0f4;
}

.itembar button:disabled {
  opacity: 0.35;
  cursor: default;
}

.itembar [data-act='delete']:hover:not(:disabled) {
  background: #fce8e6;
  color: #d93025;
}

[hidden] {
  display: none !important;
}

/* ---------- Band ---------- */
.band {
  padding: 84px 0;
  border-block: 1px solid var(--line);
  background: var(--paper-2);
}

.band__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
  gap: 56px;
}

.band__intro h2 {
  margin-bottom: 16px;
}

.band__intro p {
  color: var(--ink-soft);
}

.band__points {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.band__points li {
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.band__points .icon {
  grid-row: span 2;
  width: 48px;
  height: 48px;
}

.band__points span {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Sections ---------- */
.section {
  padding: 104px 0;
}

.section--alt {
  border-block: 1px solid var(--line);
  background: var(--paper-2);
}

.section__title {
  margin-bottom: 40px;
}

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

.steps li {
  padding: 24px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  counter-increment: step;
}

.steps li:nth-child(2) {
  transform: rotate(0.6deg);
}

.illo {
  display: block;
  width: 120px;
  height: 90px;
  margin-bottom: 16px;
  color: var(--ink);
}

.steps p {
  margin: 0;
  color: var(--muted);
}

/* "Soon": built, but not in this release yet. */
.soon {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--clay-soft);
  color: var(--clay-ink);
  font: 600 11px/1.5 var(--mono, inherit);
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.group {
  padding: 28px 30px 30px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.group:first-child {
  transform: rotate(-0.4deg);
}

.group__title {
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1.5px dashed var(--line);
  color: var(--clay-ink);
  font: 400 24px/1.2 var(--serif);
}

.group dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.group dt {
  margin-top: 14px;
  font-weight: 600;
}

.group dt:first-child {
  margin-top: 0;
}

.group dd {
  margin: 0;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.split h2 {
  margin-bottom: 20px;
}

/* The text column only: the mock-ups beside it keep their own colors. */
.split > div:not([aria-hidden]) > p {
  color: var(--ink-soft);
}

.split > div > p.muted-note {
  color: var(--muted);
}

.split--reverse > :first-child {
  order: 2;
}

/* ---------- Blog and publish mock-ups (the app's look, like the demo) ---------- */
.blog-card,
.publish-card {
  --a-bg: #ffffff;
  --a-text: #1b1c1f;
  --a-line: #e6e7eb;
  position: relative;
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  background: var(--paper-2);
  font: 13px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.section--alt .publish-card {
  background: var(--paper);
}

.posts {
  border: 1px solid #e6e7eb;
  border-radius: 10px;
  background: #fff;
  color: #1b1c1f;
}

.posts__head,
.posts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
}

.posts__row {
  border-top: 1px solid #eef0f3;
}

.blog-card__page {
  margin-left: 28px;
  transform: rotate(1deg);
}

.blog-card__path {
  margin: 0 0 6px;
  color: var(--muted);
  font: 12px var(--mono);
}

.bakery--blog {
  min-height: 0;
  padding: 14px 16px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 10%, transparent);
}

.bakery--blog .bakery__nav {
  margin-bottom: 14px;
}

.bakery--blog .bakery__nav span:last-child {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bakery__pages {
  display: flex;
  gap: 6px;
  margin: 12px 0 0;
  color: #6d4f39;
  font: 12px var(--sans);
}

.bakery__pages span {
  padding: 2px 8px;
  border-radius: 999px;
}

.bakery__pages .is-on {
  background: #3b2414;
  color: #fbf3e6;
}

.history {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #4a4f59;
}

.release {
  padding: 14px 16px;
  border: 1px solid #e6e7eb;
  border-radius: 10px;
  background: #fff;
  color: #1b1c1f;
}

.release p {
  margin: 4px 0 0;
  color: #5b5f69;
}

.release .mono {
  font-size: 12px;
}

.release__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.release__actions {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.pill {
  padding: 2px 8px;
  border-radius: 999px;
  background: #f2f3f5;
  color: #5b5f69;
  font-size: 11.5px;
  font-weight: 600;
}

.pill--scheduled {
  background: #fef3e0;
  color: #8a4b00;
}

.pill--live {
  background: #e6f4ea;
  color: #1e6b34;
}

/* ---------- AI proposal ---------- */
.proposal {
  border: 1px solid #e6e7eb;
  border-radius: 12px;
  background: #fff;
  color: #1b1c1f;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--ink) 12%, transparent);
  overflow: hidden;
  font: 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.proposal__head,
.proposal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
}

.proposal__head {
  border-bottom: 1px solid #e6e7eb;
}

.proposal__head span {
  color: #5b5f69;
}

.diff {
  padding: 12px 0;
  overflow-x: auto;
}

.diff code {
  display: block;
  padding: 0 16px;
  font: 12.5px/1.85 var(--mono);
  white-space: pre;
}

.diff .add {
  background: #e6f4ea;
  color: #1e7a38;
}

.diff .del {
  background: #fce8e6;
  color: #c5221f;
}

.proposal__actions {
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #e6e7eb;
}

.app__btn--accept {
  border-color: #3d5afe;
  background: #3d5afe;
  color: #fff;
}

/* ---------- Compare ---------- */
.table-wrap {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow-x: auto;
}

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

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

tbody tr:last-child > * {
  border-bottom: 0;
}

thead th {
  color: var(--muted);
  font: 500 12.5px var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

thead th:nth-child(2) {
  color: var(--clay-ink);
}

tbody th {
  font-weight: 600;
}

td {
  color: var(--muted);
}

td.yes {
  background: var(--clay-soft);
  color: var(--ink);
  font-weight: 600;
}

/* ---------- FAQ ---------- */
details {
  border-bottom: 1.5px solid var(--line);
}

summary {
  padding: 20px 0;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  float: right;
  color: var(--clay-ink);
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
}

details[open] summary::after {
  content: '–';
}

details p {
  max-width: 68ch;
  margin: -6px 0 20px;
  color: var(--ink-soft);
}

/* ---------- Download ---------- */
.download {
  border-top: 1px solid var(--line);
  background: radial-gradient(ellipse 70% 60% at 50% 100%, var(--clay-soft), transparent 70%);
}

.download__mark {
  display: block;
  margin: 0 auto 20px;
  transform: rotate(-6deg);
}

.download h2 {
  margin-bottom: 12px;
}

/* ---------- Download: one card per system; the visitor's own is highlighted ---------- */
.platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 36px 0 0;
  text-align: left;
}

.platform {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.2s, transform 0.2s;
}

.platform.is-yours {
  border-color: var(--clay);
  box-shadow: 0 4px 0 var(--clay);
  transform: translateY(-3px);
}

/* Once the visitor's own system is known, the other cards step back. */
.platforms.has-yours .platform:not(.is-yours) .btn--primary {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.platforms__mobile {
  display: none;
  max-width: 420px;
  margin: 20px auto 0;
  padding: 12px 16px;
  border: 1.5px dashed var(--clay);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: 15px;
}

.is-mobile .platforms__mobile {
  display: block;
}

.platform__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--clay-soft);
  color: var(--clay-ink);
}

.platform__icon svg {
  width: 24px;
  height: 24px;
}

.platform h3 {
  margin: 4px 0 0;
}

.platform__req {
  margin: -6px 0 4px;
  color: var(--muted);
  font-size: 14px;
}

.platform .btn {
  width: 100%;
}

.platform__hint {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.download .fine {
  margin-top: 28px;
}

.download .fine a {
  color: inherit;
}

@media (max-width: 900px) {
  .platforms {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
}

/* ---------- Small screens ---------- */
@media (max-width: 900px) {
  .groups {
    grid-template-columns: 1fr;
  }

  .group:first-child {
    transform: none;
  }

  .split,
  .band__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .split--reverse > :first-child {
    order: 0;
  }

  .app {
    grid-template-columns: 1fr;
  }

  .app__side {
    display: none;
  }

  .demo__hint {
    left: 24px;
  }
}

/* The header links stop fitting below this width. The home page sections stay one scroll away and Docs is in the footer, but the blog is its own page, so its link stays. */
@media (max-width: 780px) {
  .site-nav {
    gap: 20px;
  }

  .site-nav a:not(.btn):not(.site-nav__page) {
    display: none;
  }

  .site-nav__page::before {
    display: none;
  }
}

/* Logo, Blog and Download share a 320px phone. */
@media (max-width: 380px) {
  .site-nav {
    gap: 14px;
  }

  .logo img {
    width: 128px;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  .hero {
    padding: 48px 0 72px;
  }

  .section {
    padding: 72px 0;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .group {
    padding: 22px 20px 24px;
  }

  .blog-card__page {
    margin-left: 0;
  }

  .steps li:nth-child(2) {
    transform: none;
  }

  .app__canvas {
    padding: 10px;
  }

  .bakery {
    padding: 14px 16px 18px;
  }

  .bakery__nav span:not(.bakery__pill) {
    display: none;
  }

  .app__drafts {
    display: none !important;
  }

  .demo {
    margin-top: 48px;
  }

  .demo__hint {
    position: static;
    margin-bottom: 12px;
    font-size: 17px;
  }

  .doodle--arrow {
    display: none;
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .btn:hover,
  .platform.is-yours {
    transform: none;
  }
}