/* HeroBoard's website. Tokens first; the colors in :root are overridden from theme settings.
   scrollcraft.css is the engine's floor and is never edited; this file styles the page's own
   markup. Spacing follows the 4px scale. */

:root {
  --sc-canvas: #f3f4f1;
  --sc-surface: #ffffff;
  --sc-ink: #15171b;
  --sc-ink-soft: #565b66;
  --sc-accent: #1f5bd8;
  --sc-accent-ink: #ffffff;
  --demo: #8b5e3c;
  --sc-font-display: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sc-font-text: 'Geist', 'Geist Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sc-font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --sc-shadow-color: 220 20% 20%;
  --line: color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --line-soft: color-mix(in oklab, var(--sc-ink) 8%, transparent);
  --well: color-mix(in oklab, var(--sc-ink) 5%, var(--sc-canvas));
  --select: #3078e8;
  --gut: clamp(1.25rem, 4vw, 3rem);
  --maxw: 76rem;
  --bar: 56px;
  --r: 14px;
}

/* A local face sized like Geist, so the swap to Geist barely moves the text. */
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans'), local('Arimo');
  size-adjust: 109%;
}

/* Without the engine (the editor's static thumbnails, or a script that fails), show everything. */
html:not(.sc-ready) [data-sc-in],
html:not(.sc-ready) [data-sc-stagger] > * { opacity: 1; transform: none; }

html { scroll-padding-top: calc(var(--bar) + 16px); }
body { font-size: 1rem; line-height: 1.6; }
body.is-home { background: var(--sc-canvas); }
h1, h2, h3 { font-family: var(--sc-font-display); margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
code { font-family: var(--sc-font-mono); font-size: 0.88em; }
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.sect { padding-block: clamp(5rem, 9vw, 8rem); }
.h2 {
  font-size: clamp(2rem, 1.45rem + 2.1vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.lede {
  margin-top: 1rem;
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--sc-ink-soft);
  max-width: 40ch;
  text-wrap: pretty;
}
.small { font-size: 0.82rem; line-height: 1.5; color: var(--sc-ink-soft); }
.mark { flex: none; color: var(--sc-ink); }

/* -------------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border-radius: 10px; border: 0;
  font: 600 0.95rem/1 var(--sc-font-text); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--sc-ink); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.4), 0 1px 2px rgb(0 0 0 / 0.16);
}
.btn--primary:hover { background: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-accent)); }
.btn--line { background: var(--sc-surface); color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--line), 0 1px 1px rgb(0 0 0 / 0.04); }
.btn--line:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.btn--quiet { color: var(--sc-ink); padding-inline: 12px; }
.btn--quiet:hover { background: var(--well); }

/* ------------------------------------------------------------------------ bar -- */
.bar {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in oklab, var(--sc-canvas) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.bar__in { display: flex; align-items: center; gap: 12px; height: var(--bar); width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.bar__brand { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 1rem; letter-spacing: -0.02em; text-decoration: none; }
.bar__badge {
  font-size: 0.75rem; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 6px;
  background: color-mix(in oklab, var(--sc-ink) 9%, var(--sc-canvas)); color: #3d424b;
}
.bar__menu { position: relative; margin-inline: auto; }
.bar__menu summary {
  display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  min-height: 40px; padding: 0 12px; border-radius: 9px; font-size: 0.92rem;
}
.bar__menu summary::-webkit-details-marker { display: none; }
.bar__menu summary:hover, .bar__menu[open] summary { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.bar__menu summary svg:last-child { transition: transform var(--sc-d-base) var(--sc-ease-out); color: var(--sc-ink-soft); }
.bar__menu[open] summary svg:last-child { transform: rotate(180deg); }
.bar__menu-label { color: var(--sc-ink-soft); }
.bar__current { font-weight: 600; min-width: 7.5em; }
.bar__list {
  position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  display: grid; min-width: 15rem; padding: 6px;
  background: var(--sc-surface); border-radius: 12px;
  box-shadow: 0 0 0 1px var(--line-soft), var(--sc-e3);
}
.bar__list a { padding: 9px 12px; border-radius: 8px; font-size: 0.92rem; text-decoration: none; }
.bar__list a:hover { background: var(--well); }
.bar__list a[aria-current] { background: color-mix(in oklab, var(--select) 12%, white); color: #1a4fae; font-weight: 600; }
.bar__end { display: flex; align-items: center; gap: 4px; }
.bar__link { font-size: 0.92rem; padding: 10px 12px; border-radius: 9px; text-decoration: none; color: var(--sc-ink-soft); }
.bar__link:hover { color: var(--sc-ink); }
.bar__cta {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 9px;
  background: var(--sc-ink); color: #fff; font-size: 0.88rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.4);
}
@media (max-width: 760px) {
  :root { --bar: 52px; }
  .bar__in { gap: 6px; }
  .bar__badge, .bar__link, .bar__menu summary > svg:first-child { display: none; }
  .bar__name, .bar__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar__menu summary { padding: 0 8px; gap: 4px; font-size: 0.88rem; }
  .bar__current { min-width: 0; max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ------------------------------------------------------------- the demo website --
   A recreation of HeroBoard's Studio theme, sized in em so each use scales it. */
.demo { background: #fff; color: #242822; font-family: var(--sc-font-text); line-height: 1.3; letter-spacing: 0; overflow: hidden; }
.demo__announce { padding: 0.75em; text-align: center; font-size: 0.82em; letter-spacing: 0.06em; background: #e8ebe6; color: #33372f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo__header { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.5em 2.4em; }
.demo__logo { font-size: 1.75em; font-weight: 500; letter-spacing: -0.045em; white-space: nowrap; }
.demo__nav { display: flex; gap: 1.8em; font-size: 0.95em; white-space: nowrap; }
.demo__burger { display: grid; gap: 0.35em; width: 1.6em; }
.demo__burger i { display: block; height: 0.14em; background: currentColor; border-radius: 1em; }
.demo__banner {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 1.3em;
  min-height: 25em; padding: 3em 2em; text-align: center; color: #fff;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--demo) 72%, #f2d9b8) 0%, var(--demo) 52%, color-mix(in oklab, var(--demo) 72%, #120c06) 100%);
}
.demo__hills { position: absolute; inset: auto 0 0 0; width: 100%; height: 38%; color: #120c06; pointer-events: none; }
.demo__copy { position: relative; padding: 0.1em 0.3em; }
.demo__title { display: inline-block; min-height: 1.04em; font-size: 3.4em; font-weight: 400; letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; }
.demo__text { position: relative; font-size: 1.05em; max-width: 30em; opacity: 0.94; }
.demo__button { position: relative; padding: 1.05em 1.8em; background: #fff; color: #242822; font-size: 0.95em; }
.demo__tab { display: none; position: absolute; left: -2px; bottom: 100%; padding: 0.35em 0.6em; background: #1d5fd0; color: #fff; font-size: 0.8em; font-weight: 600; border-radius: 0.3em 0.3em 0 0; white-space: nowrap; }
.demo__copy.is-selected { outline: 2px solid var(--select); outline-offset: 0.2em; }
.demo__copy.is-selected .demo__tab { display: block; }
.demo__chip { position: relative; display: grid; gap: 0.2em; padding: 0.7em 1em; background: #fff3b0; color: #3b2f05; border: 2px dashed #c62828; border-radius: 0.5em; text-align: left; }
.demo__chip strong { font-size: 0.95em; }
.demo__chip span { font-size: 0.8em; color: #6b5a12; }
.demo__pin { position: absolute; left: 13%; top: 42%; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50% 50% 50% 0.3em; background: #1a6af0; color: #fff; font-weight: 700; font-size: 1em; box-shadow: 0 0 0 0.25em #fff3, 0 0.3em 0.8em #0005; }
.demo__pin i { position: absolute; top: -0.6em; right: -0.6em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #15171b; font-size: 0.7em; font-style: normal; }
.demo__posts { padding: 2.4em 2.4em 3em; }
.demo__posts > b { display: block; font-size: 1.5em; font-weight: 500; letter-spacing: -0.03em; margin-bottom: 1em; }
.demo__posts > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.demo__posts span { display: grid; gap: 0.6em; font-size: 0.95em; }
.demo__posts i { display: block; aspect-ratio: 4 / 3; border-radius: 0.3em; background: linear-gradient(160deg, color-mix(in oklab, var(--demo) calc(30% + var(--k) * 12%), #efe6da), color-mix(in oklab, var(--demo) 55%, #3a2a1c)); }
.demo--mobile .demo__posts { padding: 2em 1.6em; }
.demo--mobile .demo__posts > div { grid-template-columns: 1fr; }
.demo--mobile .demo__header { padding: 1.4em 1.6em; }
.demo--mobile .demo__logo { font-size: 1.6em; }
.demo--mobile .demo__banner { min-height: 36em; padding: 3em 1.6em; }
.demo--mobile .demo__title { font-size: 3.1em; }

/* ------------------------------------------------- editor parts, shared -- */
.tree__head { padding: 1.3em 1.4em; font-weight: 600; font-size: 1.1em; border-bottom: 1px solid #e3e3e3; }
.tree__group { padding: 1.2em 0.8em 0.6em; border-bottom: 1px solid #e3e3e3; }
.tree__group b { display: block; padding: 0 0.6em 0.7em; font-size: 1.05em; }
.tree__group ul { list-style: none; margin: 0; padding: 0; }
.tree__row { display: flex; align-items: center; gap: 0.7em; padding: 0.55em 0.6em; border-radius: 0.6em; font-size: 1em; color: #303030; white-space: nowrap; overflow: hidden; }
.tree__row svg { flex: none; width: 1.4em; height: 1.4em; color: #616161; }
.tree__row em { color: #616161; font-size: 0.95em; overflow: hidden; text-overflow: ellipsis; }
.tree__row--open { background: #ebf1fd; color: #0b4fb8; }
.tree__row--open svg { color: #0b4fb8; }
.tree__blocks { padding-left: 1.6em !important; }
.tree__row--block { font-size: 0.95em; }
.tree__row--block:first-child { position: relative; }
.pane__head { display: flex; align-items: center; justify-content: space-between; padding: 1.3em 1.4em; border-bottom: 1px solid #e3e3e3; font-size: 1.1em; }
.pane__head svg { width: 1.3em; height: 1.3em; color: #616161; }
.pane__body { display: grid; gap: 0.55em; padding: 1.2em 1.4em; }
.pane__cap { font-size: 0.9em; color: #616161; margin-bottom: 0.4em; }
.pane__group { font-weight: 600; font-size: 1.05em; margin-top: 0.4em; }
.pane__request { display: flex; align-items: center; gap: 0.4em; color: #005bd3; font-weight: 600; font-size: 0.92em; margin-bottom: 0.6em; }
.pane__request svg { width: 1.2em; height: 1.2em; }
.field__label { font-size: 0.95em; color: #303030; }
.field__input { position: relative; display: flex; align-items: center; gap: 0.6em; min-height: 3em; padding: 0 0.9em; border: 1px solid #8a8a8a66; border-radius: 0.65em; background: #fff; font-size: 1em; color: #303030; white-space: nowrap; overflow: hidden; }
.field__input.is-focus { border-color: var(--select); box-shadow: 0 0 0 2px color-mix(in oklab, var(--select) 30%, transparent); }
.field__input--select { justify-content: space-between; }
.field__input--select svg { width: 1.2em; height: 1.2em; color: #616161; }
.swatch { flex: none; width: 1.7em; height: 1.2em; border-radius: 0.25em; box-shadow: inset 0 0 0 1px #0002; background: var(--demo); }
.caret { display: inline-block; width: 1px; height: 1.2em; margin-left: 1px; background: #15171b; vertical-align: middle; animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ----------------------------------------------------------------------- hero -- */
.hero { position: relative; overflow: clip; }
.hero__in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 4vw, 4rem);
  min-height: calc(100svh - var(--bar)); padding-block: clamp(3rem, 6vw, 5rem);
}
.hero__title {
  font-size: clamp(2.5rem, 1.45rem + 2.55vw, 4rem);
  line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance;
}
.hero__accent { display: block; margin-top: 0.12em; color: var(--sc-accent); }
.nw { white-space: nowrap; }
/* With the agent beside the editor, the copy takes half the width, so the heading's two sentences sit on four lines. */
@media (min-width: 961px) { .hero--agent .hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero__text { margin-top: 1.5rem; max-width: 34rem; font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); line-height: 1.55; color: var(--sc-ink-soft); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2rem; }
.hero__actions .btn--primary { min-height: 48px; padding-inline: 24px; font-size: 1rem; }
.hero__note { margin-top: 1rem; font-size: 0.88rem; color: var(--sc-ink-soft); }

.hero__scene { position: relative; aspect-ratio: 1 / 0.86; container-type: inline-size; }
.plane { position: absolute; }
.plane__body {
  font-size: 1.32cqw;
  transform: translate3d(calc(var(--mx, 0) * var(--d) * 9px), calc(var(--my, 0) * var(--d) * 6px), 0);
  transition: transform 700ms var(--sc-ease-out);
  background: #fff; border-radius: 12px; overflow: hidden; color: #303030;
  box-shadow: 0 0 0 1px rgb(20 24 30 / 0.06), var(--sc-e3);
}
.plane--site { left: 9%; top: 2%; width: 91%; }
.plane__chrome { display: flex; align-items: center; gap: 0.5em; padding: 0.9em 1.1em; background: #f1f1f1; border-bottom: 1px solid #e3e3e3; }
.plane__chrome i { width: 0.8em; height: 0.8em; border-radius: 50%; background: #d4d4d4; }
.plane__chrome span { margin-left: 0.6em; font-size: 0.95em; color: #616161; }
.plane--site .demo__banner { min-height: 23em; }
.plane--tree { left: 0; top: 40%; width: 31%; }
.plane--tree .tree__group:last-child { border-bottom: 0; }
.plane--panel { right: -1%; top: 56%; width: 37%; }
.hero__eyebrow { display: inline-flex; margin-bottom: 1.25rem; padding: 6px 12px; border-radius: 99px; background: color-mix(in oklab, var(--sc-accent) 10%, var(--sc-surface)); color: color-mix(in oklab, var(--sc-accent) 80%, black); font-size: 0.88rem; font-weight: 600; line-height: 1.3; }
.plane__tag { margin-left: auto; padding: 0.25em 0.75em; border-radius: 99px; background: color-mix(in oklab, var(--sc-accent) 12%, white); color: color-mix(in oklab, var(--sc-accent) 82%, black); font-size: 0.9em; font-weight: 650; white-space: nowrap; }
.hero--agent .plane--site { left: 20%; top: 21%; width: 80%; }
.hero--agent .plane--panel { right: -1%; top: 63%; width: 36%; }
.plane--agent { left: 0; top: 0; width: 54%; }
.plane__body.agent { font-size: 1.62cqw; background: #15171b; color: #e6e8ec; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.04), var(--sc-e3); }
.agent__head { display: flex; align-items: center; gap: 0.5em; padding: 0.9em 1.1em; border-bottom: 1px solid #2a2d33; }
.agent__head i { width: 0.8em; height: 0.8em; border-radius: 50%; background: #3a3e45; }
.agent__head span { margin-left: 0.6em; font-size: 0.95em; color: #a3a9b4; }
.agent__body { display: grid; gap: 0.8em; padding: 1.2em 1.3em 1.4em; font-size: 1.08em; }
.agent__you { display: flex; gap: 0.6em; font-weight: 550; color: #fff; line-height: 1.4; }
.agent__you span { color: #8fb0ff; font-weight: 700; }
.agent__tool { display: grid; gap: 0.1em; font: 0.92em/1.45 var(--sc-font-mono); }
.agent__tool span { color: #9aa1ad; }
.agent__tool span::before { content: '→ '; }
.agent__done { display: flex; align-items: center; gap: 0.5em; color: #86e0ad; font-weight: 600; }
.agent__done svg { width: 1.2em; height: 1.2em; }
@media (max-width: 960px) {
  .hero__in { grid-template-columns: 1fr; min-height: 0; padding-top: 2.5rem; gap: 2.5rem; }
  .hero__scene { width: min(100%, 40rem); }
}
@media (max-width: 560px) {
  .hero__scene { aspect-ratio: 1 / 0.98; }
  .plane__body { font-size: 1.62cqw; border-radius: 9px; }
  .plane--site { left: 4%; width: 96%; }
  .plane--tree { top: 46%; width: 40%; }
  .plane--panel { top: 60%; width: 50%; right: 0; }
  .plane--tree .tree__group:nth-of-type(3), .plane--tree .tree__group:nth-of-type(4) { display: none; }
  .hero--agent .hero__scene { aspect-ratio: 1 / 1.2; }
  .plane--agent { width: 94%; }
  .plane__body.agent { font-size: 2.55cqw; }
  .hero--agent .plane--site { left: 6%; top: 37%; width: 94%; }
  .hero--agent .plane--panel { top: 72%; width: 54%; right: 0; }
}

/* ---------------------------------------------------------- how editing works -- */
.howto__head { max-width: 46rem; }
.howto__steps { list-style: none; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 0; display: grid; gap: clamp(3.5rem, 7vw, 6rem); }
.howto__step { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.howto__step--flip .howto__copy { order: 2; }
.howto__n { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--sc-accent); color: #fff; font-weight: 650; font-size: 0.9rem; }
.howto__copy h3 { margin-top: 1rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.03em; line-height: 1.1; }
.howto__copy p { margin-top: 0.75rem; color: var(--sc-ink-soft); font-size: 1.05rem; max-width: 34ch; }
.howto__demo { position: relative; container-type: inline-size; }
.howto__note { margin-top: 2.5rem; }

.ed {
  position: relative; display: grid; grid-template-rows: auto 1fr; aspect-ratio: 1.48;
  font-size: 1.12cqw; background: #f1f1f1; color: #303030; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(20 24 30 / 0.08), var(--sc-e3);
}
.ed__top { display: flex; align-items: center; gap: 0.5em; height: 4.6em; padding: 0 0.9em; background: #fff; border-bottom: 1px solid #e3e3e3; white-space: nowrap; }
.ed__icon { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.6em; color: #4a4a4a; flex: none; }
.ed__icon svg { width: 1.45em; height: 1.45em; }
.ed__icon.is-on { background: #ebf1fd; color: #0b4fb8; }
.ed__theme, .ed__template { display: flex; align-items: center; gap: 0.5em; font-size: 1.05em; }
.ed__theme { margin-left: auto; }
.ed__theme svg, .ed__template svg { width: 1.3em; height: 1.3em; color: #4a4a4a; }
.ed__draft { padding: 0.2em 0.5em; border-radius: 0.4em; background: #e3e3e3; font-size: 0.8em; font-weight: 600; color: #4a4a4a; }
.ed__template { margin: 0 auto 0 1.4em; }
.ed__tools { display: flex; align-items: center; gap: 0.35em; }
.ed__rule { width: 1px; height: 1.8em; background: #e3e3e3; margin: 0 0.4em; }
.ed__state { font-size: 0.85em; color: #616161; margin: 0 0.5em; min-width: 8.5em; text-align: right; }
.ed__save, .ed__publish { display: inline-flex; align-items: center; gap: 0.5em; height: 2.6em; padding: 0 1em; border-radius: 0.6em; font-weight: 600; font-size: 0.95em; }
.ed__save { color: #6b6b6b; box-shadow: inset 0 0 0 1px #e3e3e3; }
.ed__publish { position: relative; background: #303030; color: #fff; box-shadow: inset 0 -1px 0 #000, 0 1px 0 #0002; transition: background-color 200ms, transform 120ms; }
.ed__spinner { display: none; width: 1em; height: 1em; border-radius: 50%; border: 2px solid #fff6; border-top-color: #fff; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.ed.is-busy .ed__spinner { display: block; }
.ed.is-busy .ed__publish { background: #4a4a4a; }
.ed.is-press .ed__publish { transform: translateY(1px) scale(0.97); }
.ed.is-done .ed__publish { background: #e3e3e3; color: #5c5c5c; box-shadow: none; }
.ed.is-dirty .ed__save { color: #303030; box-shadow: inset 0 0 0 1px #c9c9c9; }
.ed__body { display: grid; grid-template-columns: 19em minmax(0, 1fr) 22em; min-height: 0; }
.ed__tree, .ed__panel { background: #fff; overflow: hidden; }
.ed__tree { border-right: 1px solid #e3e3e3; }
.ed__panel { position: relative; border-left: 1px solid #e3e3e3; }
.ed__canvas { position: relative; padding: 1.4em 1.4em 2.6em; min-width: 0; overflow: hidden; }
.ed__frame { height: 100%; border-radius: 0.8em; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px #e3e3e3; }
.ed__frame .demo { height: 100%; font-size: 0.86em; }
.ed__frame .demo__banner { min-height: 24em; }
.ed__caption { position: absolute; bottom: 0.8em; left: 0; right: 0; text-align: center; font-size: 0.8em; color: #616161; }
.ed .demo__copy.is-selected { outline-color: transparent; }
.ed .demo__copy.is-selected .demo__tab { display: none; }
.ed.is-sel .demo__copy.is-selected { outline-color: var(--select); }
.ed.is-sel .demo__copy.is-selected .demo__tab { display: block; }
.ed .tree__row--block:first-child { transition: background-color 200ms; }
.ed.is-sel .tree__row--block:first-child { background: #ebf1fd; color: #0b4fb8; }
.ed.is-sel .tree__row--block:first-child svg { color: #0b4fb8; }
.pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 240ms var(--sc-ease-out), visibility 0s 240ms; }
.ed[data-mode='empty'] .pane[data-pane='empty'],
.ed[data-mode='block'] .pane[data-pane='block'],
.ed[data-mode='theme'] .pane[data-pane='theme'] { opacity: 1; visibility: visible; transition: opacity 240ms var(--sc-ease-out); }
.pane__empty { display: grid; justify-items: center; gap: 0.6em; padding: 5em 2em 0; text-align: center; color: #616161; font-size: 0.95em; }
.pane__empty b { color: #303030; font-size: 1.05em; }
.pane__empty svg { width: 2.6em; height: 2.6em; color: #8a8a8a; }
.ed.is-typing .field__input[data-field] { border-color: var(--select); box-shadow: 0 0 0 2px color-mix(in oklab, var(--select) 30%, transparent); }
.field__input .caret { display: none; }
.ed.is-typing .field__input .caret, .plane .caret { display: inline-block; }
.seg-mini { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid #8a8a8a55; border-radius: 0.65em; overflow: hidden; font-size: 0.9em; text-align: center; }
.seg-mini span { padding: 0.7em 0; }
.seg-mini .is-on { background: #f1f1f1; box-shadow: inset 1px 0 0 #8a8a8a33, inset -1px 0 0 #8a8a8a33; }
.swatches { display: flex; gap: 0.5em; margin: 0.2em 0 0.6em; }
.swatches i { width: 2.2em; height: 2.2em; border-radius: 50%; box-shadow: inset 0 0 0 1px #0002; transition: box-shadow 160ms; }
.swatches i.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--select); }
.ed__cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px; pointer-events: none; will-change: transform; filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35)); }
.ed__cursor::after { content: ''; position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--select); opacity: 0; transform: scale(0.4); transition: opacity 160ms, transform 260ms var(--sc-ease-out); }
.ed__cursor.is-click::after { opacity: 1; transform: scale(1); }
.ed__toast {
  position: absolute; left: 50%; bottom: 1.6em; z-index: 4; display: flex; align-items: center; gap: 0.5em;
  padding: 0.8em 1.2em; border-radius: 0.8em; background: #303030; color: #fff; font-weight: 600; font-size: 1.05em;
  translate: -50% 0; opacity: 0; transform: translateY(0.8em); transition: opacity 240ms var(--sc-ease-out), transform 300ms var(--sc-ease-out);
}
.ed__toast svg { width: 1.3em; height: 1.3em; color: #7ee2a8; }
.ed.is-done .ed__toast { opacity: 1; transform: none; }

.phone {
  --ph: 0;
  position: absolute; right: -3%; bottom: -5%; z-index: 6; width: 25%; aspect-ratio: 9 / 18.5;
  padding: 0.55em; border-radius: 2.6em; background: #050608; font-size: 1.1cqw;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12), 0 40px 80px -20px rgb(0 0 0 / 0.9);
  opacity: var(--ph); transform: translate3d(0, calc((1 - var(--ph)) * 16%), 0) rotate(calc((1 - var(--ph)) * 4deg));
}
.phone__bar { display: flex; align-items: center; justify-content: center; gap: 0.4em; height: 3.2em; border-radius: 2.1em 2.1em 0 0; background: #f1f1f1; color: #303030; font-size: 0.82em; }
.phone__bar svg { width: 1.1em; height: 1.1em; }
.phone__screen { height: calc(100% - 2.6em); overflow: hidden; border-radius: 0 0 2.1em 2.1em; background: #fff; }
.phone__screen .demo { font-size: 0.74em; height: 100%; }
.phone__live { position: absolute; top: -0.9em; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 0.4em; padding: 0.35em 0.8em; border-radius: 99px; background: #17723f; color: #fff; font-size: 0.85em; font-weight: 600; white-space: nowrap; }
.phone__live::before { content: ''; width: 0.5em; height: 0.5em; border-radius: 50%; background: #c9f5d8; }

@media (max-width: 860px) {
  .howto__step { grid-template-columns: 1fr; gap: 1.5rem; }
  .howto__step--flip .howto__copy { order: 0; }
  .ed { aspect-ratio: 0.92; font-size: 2.55cqw; }
  .ed__top .ed__icon:not(:first-child), .ed__template, .ed__tools > .ed__icon, .ed__rule, .ed__save, .ed__draft { display: none; }
  .ed__state { min-width: 0; }
  .ed__body { grid-template-columns: 1fr; position: relative; }
  .ed__tree { display: none; }
  .ed__canvas { padding: 0.9em 0.9em 0; }
  .ed__frame .demo { font-size: 0.9em; }
  .ed__caption { display: none; }
  .ed__panel { position: absolute; left: 0; right: 0; bottom: 0; height: 47%; border: 0; border-top: 1px solid #e3e3e3; border-radius: 1.2em 1.2em 0 0; box-shadow: 0 -10px 30px -10px rgb(0 0 0 / 0.25); }
  .pane__body { gap: 0.45em; padding: 0.9em 1.2em; }
  .pane__head { padding: 0.9em 1.2em; }
  .ed__cursor { display: none; }
  .ed__toast { bottom: auto; top: 6em; }
  .phone { right: 50%; translate: 50% 0; bottom: 4%; width: 46%; font-size: 2.3cqw; }
}

/* ------------------------------------------------------------ sound familiar -- */
.pain { padding-block: clamp(3rem, 6vw, 4.5rem); background: var(--sc-surface); border-block: 1px solid var(--line-soft); }
.pain__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.75rem clamp(2rem, 5vw, 5rem); align-items: start; }
.pain__title { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.4rem); letter-spacing: -0.032em; line-height: 1.08; }
.pain__text { margin-top: 0.75rem; color: var(--sc-ink-soft); font-size: 1.05rem; max-width: 30ch; }
.pain__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pain__list li { padding: 1.2rem 1.25rem 1.35rem; border-radius: 14px; background: var(--sc-canvas); box-shadow: 0 0 0 1px var(--line-soft); }
.pain__list h3 { font-size: 1.06rem; letter-spacing: -0.015em; line-height: 1.3; }
.pain__list p { margin-top: 0.5rem; color: var(--sc-ink-soft); font-size: 0.92rem; line-height: 1.5; }
@media (max-width: 960px) { .pain__in { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pain__list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- how it works -- */
.steps__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem); }
.steps__lead { grid-column: 1; }
.steps__list { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps__item { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.steps__item:last-child { border-bottom: 1px solid var(--line); }
.steps__n { font: 500 0.95rem/1.6 var(--sc-font-mono); color: var(--sc-accent); }
.steps__item h3 { font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.25; }
.steps__item p { margin-top: 0.5rem; color: var(--sc-ink-soft); max-width: 50ch; }
.steps__detail { display: inline-block; margin-top: 0.85rem; padding: 4px 10px; border-radius: 6px; background: var(--well); font: 500 0.82rem/1.5 var(--sc-font-mono); color: #3d424b; }
.flow { grid-column: 1; align-self: end; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 22rem; }
.flow__box { position: relative; display: grid; gap: 2px; padding: 0.85rem 1rem; background: var(--sc-surface); border-radius: 10px; box-shadow: 0 0 0 1px var(--line-soft), var(--sc-e1); }
.flow__box + .flow__box { margin-top: 1.75rem; }
.flow__box + .flow__box::before { content: ''; position: absolute; left: 1.6rem; top: -1.75rem; height: 1.75rem; border-left: 1.5px dashed color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.flow__box strong { display: flex; align-items: center; gap: 8px; font-size: 0.98rem; }
.flow__box strong .mark { width: 20px; height: 20px; }
.flow__box span { font-size: 0.86rem; color: var(--sc-ink-soft); }
.flow__box--hb { box-shadow: 0 0 0 1.5px var(--sc-accent), var(--sc-e2); }
@media (max-width: 860px) {
  .steps__in { grid-template-columns: 1fr; }
  .steps__lead, .steps__list, .flow { grid-column: 1; grid-row: auto; }
}

/* ------------------------------------------- client requests and comments -- */
.feature--requests { background: var(--sc-surface); }
.feature__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'copy demo' 'points demo'; align-items: center; column-gap: clamp(2.5rem, 6vw, 6rem); }
.feature__in--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: 'demo copy' 'demo points'; }
.feature__copy { grid-area: copy; align-self: end; }
.feature__demo { grid-area: demo; }
.feature__points { grid-area: points; align-self: start; }
.feature__points { margin: 2rem 0 0; display: grid; gap: 0; }
.feature__points > div { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.feature__points dt { font-weight: 600; letter-spacing: -0.01em; }
.feature__points dd { margin: 0.3rem 0 0; color: var(--sc-ink-soft); font-size: 0.96rem; }
.feature__demo { position: relative; container-type: inline-size; min-width: 0; }
@media (max-width: 860px) {
  .feature__in, .feature__in--flip { grid-template-columns: 1fr; grid-template-areas: 'copy' 'demo' 'points'; row-gap: 2rem; }
}

/* The demos: a preview link in a browser, drawn the way the live preview looks today: the dock,
   the request spot, the answer dialog over a tinted scrim, and the comment popovers. */
.rq, .cm { position: relative; aspect-ratio: 1.25; overflow: hidden; border-radius: 14px; background: #fff; color: #18181b; font-size: 1.5cqw; box-shadow: 0 0 0 1px rgb(20 24 30 / 0.08), var(--sc-e3); }
.rq .demo, .cm .demo { font-size: 0.95em; }
.pv__chrome { position: relative; z-index: 6; display: flex; align-items: center; gap: 0.5em; height: 3.2em; padding: 0 1.1em; background: #f1f1f1; border-bottom: 1px solid #e3e3e3; }
.pv__chrome > i { width: 0.75em; height: 0.75em; border-radius: 50%; background: #d4d4d4; }
.pv__url { display: inline-flex; align-items: center; gap: 0.4em; margin: 0 auto; padding: 0.3em 0.9em; border-radius: 99px; background: #fff; color: #555; font-size: 0.95em; box-shadow: inset 0 0 0 1px #e3e3e3; white-space: nowrap; }
.pv__url svg { width: 1em; height: 1em; }
.mini { display: inline-block; padding: 0.55em 1em; border-radius: 0.55em; box-shadow: inset 0 0 0 1px #d6d6d6; font-weight: 650; font-size: 0.95em; background: #fff; transition: transform 140ms, box-shadow 200ms; }
.mini--dark { background: #1f2124; color: #fff; box-shadow: none; }
.rq .ed__cursor, .cm .ed__cursor { left: 0; top: 0; z-index: 9; transition: transform 900ms var(--sc-ease-in-out), opacity 300ms; }

/* The floating dock: the grip, Add comment, Comments and Questions. */
.dock { position: absolute; left: 50%; bottom: 1.4em; z-index: 3; display: flex; align-items: center; gap: 0.1em; padding: 0.3em; border-radius: 99px; background: #1f2124; color: #fff; font-size: 1.05em; font-weight: 650; white-space: nowrap; box-shadow: 0 0.5em 1.6em rgb(0 0 0 / 0.3); translate: -50% 0; transition: opacity 250ms, transform 250ms; }
.dock__grip { display: grid; grid-template-columns: repeat(2, 0.22em); gap: 0.2em; padding: 0 0.55em 0 0.7em; }
.dock__grip i { width: 0.22em; height: 0.22em; border-radius: 50%; background: #8d9199; }
.dock__btn { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.65em 0.95em; border-radius: 99px; }
.dock__btn svg { width: 1.15em; height: 1.15em; }
.dock__add { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.3); }

/* The shared parts of the sheets and popovers. */
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4em; }
.chips span { padding: 0.2em 0.7em; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px #e6d27a; color: #3d2a00; font-size: 0.85em; font-weight: 650; }
.sheet__x { display: grid; place-items: center; flex: none; width: 2.4em; height: 2.4em; border-radius: 50%; background: #f2f3f5; color: #3f4450; }
.sheet__x svg { width: 1.1em; height: 1.1em; }
.as { display: flex; align-items: center; gap: 0.45em; color: #5c6370; font-size: 0.9em; white-space: nowrap; }
.as b { color: #18181b; font-weight: 650; }
.as em { font-style: normal; font-weight: 650; color: #1f6feb; }
.av { display: grid; place-items: center; flex: none; width: 1.9em; height: 1.9em; border-radius: 50%; background: #e3ebfd; color: #1a4fae; font-style: normal; font-weight: 700; font-size: 0.85em; }
.av--team { background: #18181b; color: #fff; }
.pill { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.65em 1.1em; border-radius: 99px; background: #f2f3f5; color: #18181b; font-weight: 650; font-size: 0.95em; white-space: nowrap; transition: background-color 200ms, color 200ms, box-shadow 200ms; }
.pill svg { width: 1.05em; height: 1.05em; }
.pill--send { background: #e4e5e9; color: #6b7079; }
.pill--blue { background: #1f6feb; color: #fff; }
.pill--soft { padding: 0.45em 0.8em; font-size: 0.82em; }

/* Client requests: the spot on the preview, the answer dialog with a photo that doesn't fit and
   one that does, the thank-you, then the editor's inbox applying it. data-scene follows the clock. */
.rq__preview, .rq__inbox { position: absolute; inset: 0; transition: opacity 400ms var(--sc-ease-out); }
.rq__preview { display: grid; grid-template-rows: auto 1fr; }
.rq__page { position: relative; overflow: hidden; }
.demo__banner--spot { min-height: 27em; background: #fff3b0; color: #3d2a00; outline: 2px dashed #c62828; outline-offset: -2px; }
.spot { display: grid; justify-items: center; gap: 0.6em; }
.spot__icon svg { width: 2.1em; height: 2.1em; color: #8a6100; }
.spot__title { font-size: 1.3em; }
.spot__q { font-size: 1.05em; }
.spot__btn { margin-top: 0.3em; padding: 0.8em 1.3em; border-radius: 0.6em; background: #1f2124; color: #fff; font-weight: 650; transition: box-shadow 200ms; }
.spot__done { display: none; }
.rq__q-done { display: none; }
.scrim { position: absolute; inset: 3.2em 0 0; z-index: 4; background: rgb(24 24 27 / 0.28); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 300ms; }
.rq__dialog { position: absolute; z-index: 5; left: 50%; top: 56%; width: 62%; display: grid; gap: 0.7em; padding: 1.4em 1.5em 1.5em; border-radius: 1.4em; background: #fff; box-shadow: 0 1.6em 4em rgb(15 23 42 / 0.3); translate: -50% -50%; opacity: 0; transform: translateY(1em); transition: opacity 300ms, transform 400ms var(--sc-ease-out); }
.sheet__top { display: flex; justify-content: space-between; align-items: center; }
.badge-q { padding: 0.25em 0.75em; border-radius: 99px; background: #fff1cc; color: #6e4a00; font-size: 0.85em; font-weight: 650; }
.sheet__title { font-size: 1.35em; letter-spacing: -0.01em; line-height: 1.25; }
.rq__dialog .chips { justify-content: flex-start; }
.rq__dialog .chips span { background: #f2f3f5; box-shadow: none; color: #3f4450; }
.rq__ask { display: grid; gap: 0.7em; }
.pick { display: flex; align-items: center; gap: 0.9em; padding: 0.85em; border: 1.5px dashed #c4c7ce; border-radius: 1em; background: #f2f3f5; }
.pick__icon { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 0.7em; background: #fff; color: #1f6feb; }
.pick__icon svg { width: 1.4em; height: 1.4em; }
.pick b { display: block; font-size: 1.05em; }
.pick small, .file small { display: block; color: #5c6370; font-size: 0.82em; }
.pick__again { display: none; }
.file { display: none; align-items: center; gap: 0.8em; padding: 0.5em; border-radius: 0.9em; background: #f2f3f5; }
.file b { display: block; font-size: 0.92em; }
.file__thumb { flex: none; width: 3.4em; height: 3.4em; border-radius: 0.6em; background: linear-gradient(180deg, #d8a46a, #8b5e3c 60%, #5a3c24); }
.file__thumb--tall { width: 2.1em; margin-inline: 0.65em; }
.file--bad small { color: #b42318; }
.file--good small { color: #1a6331; }
.sheet__actions { display: flex; justify-content: flex-end; gap: 0.5em; }
.rq__thanks { display: none; gap: 1em; justify-items: start; font-size: 1.05em; line-height: 1.5; }
.rq__inbox { opacity: 0; display: grid; align-content: start; gap: 1em; padding: 1.8em; background: #f1f1f1; }
.rq__inbox-head { display: flex; align-items: center; gap: 0.5em; font-size: 1.4em; }
.rq__inbox-head svg { width: 1.2em; height: 1.2em; }
.rq__count { padding: 0.05em 0.5em; border-radius: 99px; background: #fde68a; font-size: 0.7em; font-weight: 700; }
.rq__card { display: grid; gap: 1em; padding: 1.3em; border-radius: 1em; background: #fff; box-shadow: 0 0 0 1px #e3e3e3; }
.rq__card-top { display: flex; justify-content: space-between; gap: 1em; }
.rq__card-top span { display: block; color: #616161; font-size: 0.9em; margin-top: 0.2em; }
.rq__badge { align-self: start; padding: 0.25em 0.6em; border-radius: 0.4em; background: #fdf0b8; color: #6b5300; font-size: 0.85em; font-weight: 700; white-space: nowrap; }
.rq__answer { display: grid; gap: 0.5em; padding: 1em; border-radius: 0.8em; box-shadow: inset 0 0 0 1px #e8e8e8; }
.rq__photo { display: block; aspect-ratio: 16 / 9; width: 62%; border-radius: 0.5em; background: linear-gradient(180deg, #d8a46a, #8b5e3c 60%, #5a3c24); }
.rq__facts { font-weight: 650; font-size: 0.95em; }
.rq__chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
.rq__chips span { padding: 0.15em 0.5em; border-radius: 0.4em; background: #e7f3ec; color: #1f6b43; font-size: 0.85em; font-weight: 600; }
.rq__apply { display: flex; justify-content: flex-end; align-items: center; gap: 0.8em; }
.rq__applied { display: none; align-items: center; gap: 0.4em; color: #1f6b43; font-weight: 650; }
.rq__applied svg { width: 1.2em; height: 1.2em; }
.rq[data-scene='0'] .spot__btn { box-shadow: 0 0 0 3px #fff3b0, 0 0 0 5px var(--select); }
.rq:is([data-scene='1'], [data-scene='2'], [data-scene='3'], [data-scene='4']) .scrim { opacity: 1; }
.rq:is([data-scene='1'], [data-scene='2'], [data-scene='3'], [data-scene='4']) .rq__dialog { opacity: 1; transform: none; }
.rq:is([data-scene='2'], [data-scene='3']) .pick__first { display: none; }
.rq:is([data-scene='2'], [data-scene='3']) .pick__again { display: inline; }
.rq[data-scene='2'] .file--bad, .rq[data-scene='3'] .file--good { display: flex; }
.rq[data-scene='3'] .rq__send { background: #1f6feb; color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--select); }
.rq[data-scene='4'] .rq__ask { display: none; }
.rq[data-scene='4'] .rq__thanks { display: grid; }
.rq:is([data-scene='4'], [data-scene='5'], [data-scene='6']) :is(.spot__open, .rq__q-open) { display: none; }
.rq:is([data-scene='4'], [data-scene='5'], [data-scene='6']) :is(.spot__done, .rq__q-done) { display: inline; }
.rq:is([data-scene='4'], [data-scene='5'], [data-scene='6']) .spot__title { color: #1d6b35; }
.rq:is([data-scene='4'], [data-scene='5'], [data-scene='6']) .spot__btn { background: #fff; color: #18181b; box-shadow: inset 0 0 0 1px #d6d6d6; }
.rq:is([data-scene='4'], [data-scene='5'], [data-scene='6']) .spot__chips, .rq:is([data-scene='4'], [data-scene='5'], [data-scene='6']) .spot__icon { display: none; }
.rq:is([data-scene='5'], [data-scene='6']) .rq__preview { opacity: 0; }
.rq:is([data-scene='5'], [data-scene='6']) .rq__inbox { opacity: 1; }
.rq[data-scene='5'] .rq__apply-btn { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--select); }
.rq[data-scene='6'] .rq__apply-btn { display: none; }
.rq[data-scene='6'] .rq__applied { display: inline-flex; }
.rq[data-scene='6'] .rq__badge { background: #e7f3ec; color: #1f6b43; }
.rq .ed__cursor { transform: translate(var(--cx, 60cqw), var(--cy, 70cqw)); }
.rq[data-scene='0'] { --cx: 51cqw; --cy: 46cqw; }
.rq[data-scene='1'] { --cx: 40cqw; --cy: 46cqw; }
.rq[data-scene='2'] { --cx: 44cqw; --cy: 46cqw; }
.rq[data-scene='3'] { --cx: 76cqw; --cy: 68cqw; }
.rq[data-scene='4'] { --cx: 24cqw; --cy: 51cqw; }
.rq[data-scene='5'] { --cx: 90cqw; --cy: 61cqw; }
.rq[data-scene='6'] .ed__cursor { opacity: 0; }

/* Comments: Add comment, a pin, the comment with a screenshot, the team's reply, resolved. */
.cm { display: grid; grid-template-rows: auto 1fr; }
.cm__page { position: relative; overflow: hidden; }
.cm .demo__title { transition: font-weight 300ms, transform 400ms var(--sc-ease-out); }
.cm__catch { position: absolute; inset: 0; z-index: 1; background: rgb(31 111 235 / 0.06); opacity: 0; transition: opacity 250ms; }
.cm__pin { position: absolute; z-index: 2; left: 26%; top: 30%; display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50% 50% 50% 0.3em; color: #fff; font-weight: 700; opacity: 0; transform: scale(0.6); transition: opacity 250ms, transform 350ms var(--sc-ease-out); box-shadow: 0 0 0 0.2em #fff, 0 0.4em 1em #0005; }
.cm__pin--new { background: #f59e0b; font-size: 1.2em; }
.cm__pin--open { background: #1a6af0; }
.cm__pin--open i { position: absolute; top: -0.6em; right: -0.6em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #15171b; font-size: 0.7em; font-style: normal; }
.pop { position: absolute; z-index: 4; right: 3%; top: 16%; width: 52%; display: grid; gap: 0.7em; padding: 1.1em 1.2em; border-radius: 1.2em; background: #fff; box-shadow: 0 0 0 1px rgb(15 23 42 / 0.06), 0 1.6em 4em rgb(15 23 42 / 0.26); opacity: 0; transform: translateY(0.8em); transition: opacity 250ms, transform 350ms var(--sc-ease-out); }
.pop__head { display: flex; align-items: center; gap: 0.6em; }
.pop__badge { display: grid; place-items: center; flex: none; width: 2em; height: 2em; border-radius: 50% 50% 50% 0.25em; background: #1a6af0; color: #fff; font-weight: 700; font-size: 0.9em; box-shadow: 0 0 0 0.15em #fff, 0 0.2em 0.5em #0003; }
.pop__badge--new { background: #f59e0b; }
.pop__titles { flex: 1; min-width: 0; display: grid; }
.pop__titles b { font-size: 1.15em; }
.pop__titles small { color: #5c6370; font-size: 0.82em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.box { display: block; min-height: 5.4em; padding: 0.8em 0.9em; border-radius: 0.9em; background: #fff; box-shadow: 0 0 0 2px #1f6feb; line-height: 1.45; }
.box .caret { display: inline-block; }
.box .cm__thumb { margin-top: 0.6em; }
.cm__thumb { display: block; width: 4.4em; height: 3.4em; border-radius: 0.5em; background: linear-gradient(160deg, #c47d4b, #6b4a2e); opacity: 0; transition: opacity 250ms; }
.cm.is-attached .cm__thumb, .cm__thumb--sent { opacity: 1; }
.cm__thumb--sent { margin-top: 0.5em; }
.tools { display: flex; justify-content: space-between; align-items: center; }
.tool { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; color: #3f4450; }
.tool svg { width: 1.4em; height: 1.4em; }
.cm.is-typed .cm__post { background: #1f6feb; color: #fff; }
.msg { display: grid; grid-template-columns: 1.9em 1fr; gap: 0.6em; align-items: start; }
.bubble { display: block; padding: 0.6em 0.8em; border-radius: 0.9em; background: #f2f3f5; }
.bubble b { font-size: 0.9em; }
.bubble small { margin-left: 0.45em; color: #5c6370; font-size: 0.78em; }
.bubble__text { display: block; margin-top: 0.2em; line-height: 1.4; }
.tag-team { margin-left: 0.45em; padding: 0.1em 0.5em; border-radius: 99px; background: #e3ebfd; color: #1a4fae; font-size: 0.72em; font-weight: 700; }
.cm__reply, .cm__resolved, .cm__one, .cm__reopen { display: none; }
.cm__resolved { align-items: center; gap: 0.35em; justify-self: start; padding: 0.3em 0.7em; border-radius: 99px; background: #e1f3e6; color: #1a6331; font-weight: 650; font-size: 0.85em; }
.cm__resolved svg { width: 1.1em; height: 1.1em; }
.cm__hint { position: absolute; left: 50%; bottom: 1.4em; z-index: 3; display: flex; align-items: center; gap: 0.8em; padding: 0.4em 0.4em 0.4em 1.1em; border-radius: 99px; background: #1f2124; color: #fff; font-weight: 600; white-space: nowrap; translate: -50% 0; opacity: 0; transition: opacity 250ms; }
.cm__hint span { padding: 0.35em 0.8em; border: 1px solid #5b5f66; border-radius: 0.4em; font-size: 0.85em; }
.cm[data-scene='0'] .dock__add { background: rgb(255 255 255 / 0.12); }
.cm:is([data-scene='1'], [data-scene='2']) .dock { opacity: 0; transform: translateY(0.6em); }
.cm[data-scene='1'] :is(.cm__hint, .cm__catch) { opacity: 1; }
.cm[data-scene='2'] .cm__pin--new, .cm:is([data-scene='3'], [data-scene='4']) .cm__pin--open { opacity: 1; transform: none; }
.cm[data-scene='2'] .cm__compose, .cm:is([data-scene='3'], [data-scene='4'], [data-scene='5']) .cm__thread { opacity: 1; transform: none; }
.cm:is([data-scene='4'], [data-scene='5']) .cm__reply { display: grid; }
.cm:is([data-scene='4'], [data-scene='5']) .cm__one { display: inline; }
.cm:is([data-scene='4'], [data-scene='5']) .cm__none { display: none; }
.cm:is([data-scene='4'], [data-scene='5']) .demo__title { font-weight: 650; transform: scale(1.08); }
.cm[data-scene='4'] .cm__resolve { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--select); }
.cm[data-scene='5'] .cm__resolve, .cm[data-scene='5'] .cm__count { display: none; }
.cm[data-scene='5'] .cm__reopen { display: inline-flex; }
.cm[data-scene='5'] .cm__resolved { display: inline-flex; }
.cm .ed__cursor { transform: translate(var(--cx, 50cqw), var(--cy, 40cqw)); }
.cm[data-scene='0'] { --cx: 40cqw; --cy: 74cqw; }
.cm[data-scene='1'] { --cx: 28cqw; --cy: 30cqw; }
.cm[data-scene='2'] { --cx: 90cqw; --cy: 40cqw; }
.cm[data-scene='3'] { --cx: 72cqw; --cy: 22cqw; }
.cm[data-scene='4'] { --cx: 85cqw; --cy: 20cqw; }
.cm[data-scene='5'] .ed__cursor { opacity: 0; }
@media (max-width: 860px) {
  .rq, .cm { aspect-ratio: 0.95; font-size: 2.4cqw; }
  .rq__dialog { width: 88%; }
  .pop { width: 76%; right: 3%; top: 26%; }
  .dock { font-size: 0.95em; }
}

/* Demos play by themselves; with reduced motion they show their last frame and a play button. */
.demo-play { display: none; position: absolute; z-index: 8; left: 50%; top: 50%; translate: -50% -50%; place-items: center; width: 56px; height: 56px; border: 0; border-radius: 50%; background: var(--sc-ink); color: #fff; cursor: pointer; box-shadow: var(--sc-e2); }
.demo-play svg { width: 26px; height: 26px; }
.demo-video { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgb(20 24 30 / 0.08), var(--sc-e3); }
.demo-video video { width: 100%; height: auto; }

/* ------------------------------------------------------------------ AI agents -- */
.agents__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.wordmarks { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 0; max-width: 34rem; }
.wordmarks li { font-weight: 600; font-size: 1.05rem; letter-spacing: -0.015em; color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-canvas)); padding-right: 1rem; margin-right: 1rem; border-right: 1px solid var(--line); line-height: 1.3; }
.wordmarks li:last-child { border-right: 0; font-weight: 500; color: var(--sc-ink-soft); }
.log { margin: 0; background: var(--sc-surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line-soft), var(--sc-e3); overflow: hidden; }
.log__head { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: 0.84rem; color: var(--sc-ink-soft); }
.log__head i { width: 9px; height: 9px; border-radius: 50%; background: #d9dbd6; }
.log__head i:first-child { background: #39b26b; }
.log__head span { margin-left: 8px; }
.log__lines { list-style: none; margin: 0; padding: 0.75rem 0; }
.log__lines > li { padding: 0.6rem 1.25rem; }
.log__who { display: block; font: 600 0.72rem/1 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.4rem; }
.log__you p { font-weight: 550; font-size: 1.02rem; line-height: 1.45; }
.log__tool { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-family: var(--sc-font-mono); font-size: 0.86rem; }
.log__tool code { font-size: 1em; padding: 2px 8px; border-radius: 6px; background: var(--well); color: var(--sc-ink); }
.log__tool span { color: var(--sc-ink-soft); }
.log__tool span::before { content: '→ '; color: color-mix(in oklab, var(--sc-ink) 35%, transparent); }
.log__agent { margin-top: 0.4rem; border-top: 1px solid var(--line-soft); padding-top: 1rem !important; }
.log__agent p { line-height: 1.5; }
.log figcaption { padding: 0 1.25rem 1rem; font-size: 0.8rem; color: var(--sc-ink-soft); }
.agents__note { margin-top: 1rem; max-width: 46ch; }
.agents__note code { font-size: 0.95em; }
@media (max-width: 860px) { .agents__in { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- developers -- */
.devs { background: var(--sc-surface); }
.devs__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4rem) clamp(2.5rem, 6vw, 6rem); }
.devs__copy { align-self: center; }
.term { margin: 0; padding: 1.5rem 1.6rem; border-radius: var(--r); background: #15171b; color: #e6e8ec; font: 0.9rem/1.85 var(--sc-font-mono); overflow-x: auto; box-shadow: var(--sc-e3); }
.term code { font-size: 1em; display: grid; }
.term__line { white-space: pre; }
.term__ps { color: #8fb0ff; }
.term__note { color: #8f96a3; margin-left: 1.5ch; }
.devs__points { grid-column: 1 / -1; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 2rem; }
.devs__points > div { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.devs__points dt { font-weight: 600; letter-spacing: -0.01em; }
.devs__points dd { margin: 0.35rem 0 0; color: var(--sc-ink-soft); font-size: 0.95rem; }
@media (max-width: 860px) { .devs__in { grid-template-columns: 1fr; } .term { font-size: 0.8rem; padding: 1.1rem 1.2rem; } }

/* ---------------------------------------------------------------- connects to -- */
.links__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); }
.links__copy .small { margin-top: 1.5rem; max-width: 36ch; }
.links__list { list-style: none; margin: 0; padding: 0; }
.links__list li { display: grid; grid-template-columns: minmax(10rem, 2fr) 3fr; gap: 0.25rem 2rem; align-items: baseline; padding: 1.35rem 0; border-top: 1px solid var(--line); }
.links__list li:last-child { border-bottom: 1px solid var(--line); }
.links__name { font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.links__list li > span:last-child { color: var(--sc-ink-soft); }
@media (max-width: 860px) { .links__in { grid-template-columns: 1fr; } .links__list li { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- everything -- */
.feats { background: var(--sc-surface); }
.feats__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem 4rem; align-items: end; }
.feats__head .lede { margin-top: 0; }
.feats__list { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.feats__list li { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.75rem; padding: 1.4rem 0; border-top: 1px solid var(--line); }
.feats__list svg { color: var(--sc-accent); margin-top: 3px; }
.feats__list h3 { font-size: 1.08rem; letter-spacing: -0.012em; }
.feats__list p { margin-top: 0.3rem; color: var(--sc-ink-soft); font-size: 0.96rem; max-width: 44ch; }
@media (max-width: 760px) { .feats__head, .feats__list { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- pricing -- */
.pricing__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; }
.per { display: inline-grid; grid-auto-flow: column; margin: 0; padding: 3px; border: 0; border-radius: 11px; background: color-mix(in oklab, var(--sc-ink) 7%, var(--sc-canvas)); }
.per label { position: relative; cursor: pointer; }
.per input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.per span { display: block; padding: 8px 16px; border-radius: 8px; font-size: 0.92rem; font-weight: 550; color: var(--sc-ink-soft); white-space: nowrap; transition: background-color 160ms, color 160ms; }
.per em { font-style: normal; font-weight: 600; color: var(--sc-accent); margin-left: 4px; font-size: 0.85em; }
.per input:checked + span { background: var(--sc-surface); color: var(--sc-ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12), 0 0 0 1px var(--line-soft); }
.per input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.plans { display: grid; gap: 12px; margin-top: clamp(2rem, 4vw, 3rem); }
.plan {
  display: grid; grid-template-columns: minmax(10rem, 1.1fr) minmax(11rem, 1.2fr) minmax(0, 2.3fr) auto; align-items: center; gap: 1.5rem 2.5rem;
  padding: 1.75rem 2rem; background: var(--sc-surface); border-radius: 18px; box-shadow: 0 0 0 1px var(--line-soft), var(--sc-e1);
}
.plan--cloud { box-shadow: 0 0 0 2px var(--sc-accent), var(--sc-e2); }
.plan__name h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.tag { display: inline-block; margin-top: 0.4rem; padding: 3px 8px; border-radius: 6px; font-size: 0.76rem; font-weight: 600; background: var(--well); color: #3d424b; }
.plan--cloud .tag, .plan--agency .tag { background: color-mix(in oklab, var(--sc-accent) 11%, white); color: color-mix(in oklab, var(--sc-accent) 80%, black); }
.plan__cost { display: grid; }
.plan__price { font-size: clamp(2.2rem, 1.8rem + 1.2vw, 2.9rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__unit { margin-top: 0.4rem; font-size: 0.86rem; color: var(--sc-ink-soft); }
[data-per='year'] { display: none; }
.pricing:has(.per input[value='year']:checked) [data-per='year'] { display: block; }
.pricing:has(.per input[value='year']:checked) [data-per='month'] { display: none; }
.plan__what p { font-weight: 550; }
.plan__what ul { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.3rem 1.5rem; }
.plan__what li { display: flex; gap: 8px; font-size: 0.92rem; color: var(--sc-ink-soft); }
.plan__what li svg { flex: none; color: var(--sc-accent); margin-top: 3px; }
.pricing__more { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.freesite, .why { padding: 1.5rem 2rem; border-radius: 18px; }
.freesite { border: 1.5px dashed color-mix(in oklab, var(--sc-ink) 22%, transparent); }
.why { background: var(--well); }
.freesite h3, .why h3 { font-size: 1.12rem; letter-spacing: -0.015em; }
.freesite p, .why p { margin-top: 0.5rem; color: var(--sc-ink-soft); font-size: 0.95rem; max-width: 56ch; }
.badge-sample { display: inline-flex; align-items: center; gap: 6px; margin-top: 1rem; padding: 5px 10px 5px 6px; border-radius: 8px; background: var(--sc-surface); box-shadow: 0 0 0 1px var(--line); font-size: 0.78rem; font-weight: 600; }
.badge-sample .mark { width: 18px; height: 18px; }
@media (max-width: 1000px) {
  .plan { grid-template-columns: 1fr 1fr; padding: 1.5rem; }
  .plan__what { grid-column: 1 / -1; }
  .plan .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 640px) {
  .plan { grid-template-columns: 1fr; gap: 1rem; }
  .pricing__more { grid-template-columns: 1fr; }
  .freesite, .why { padding: 1.25rem 1.5rem; }
}

/* ------------------------------------------------------------------------ FAQ -- */
.faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.08rem; letter-spacing: -0.012em; }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary svg { flex: none; color: var(--sc-ink-soft); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.faq__list details[open] summary svg { transform: rotate(45deg); color: var(--sc-ink); }
.faq__a { padding: 0 0 1.4rem; color: var(--sc-ink-soft); max-width: 62ch; }
.faq__a p + p { margin-top: 0.75rem; }
@media (max-width: 860px) { .faq__in { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- early access -- */
.close { padding-bottom: clamp(4rem, 8vw, 7rem); }
.close__in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.close__title { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.8rem); letter-spacing: -0.045em; line-height: 0.98; }
.close__mail { margin-top: 1.5rem; color: var(--sc-ink-soft); }
.close__mail a { color: var(--sc-ink); font-weight: 550; }
.close__setup { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 10px; background: #fff3b0; color: #3b2f05; font-size: 0.88rem; max-width: 40ch; }
.panel { background: var(--sc-surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line-soft), var(--sc-e3); overflow: hidden; }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #e3e3e3; }
.panel__head b { font-size: 0.98rem; }
.panel__head span { font-size: 0.84rem; color: var(--sc-ink-soft); }
.panel__body { display: grid; gap: 1.1rem; padding: 1.25rem; }
.panel .field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.panel .field__label { font-size: 0.88rem; font-weight: 550; padding: 0; }
.panel .field__input { min-height: 44px; font: inherit; font-size: 1rem; border-color: #c9cbc6; color: var(--sc-ink); }
.panel .field__input:focus { outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 22%, transparent); }
.field__input--num { width: 9rem; }
.field__hint { margin-left: 4px; font-weight: 400; font-size: 0.82rem; color: var(--sc-ink-soft); }
.picks { display: flex; flex-wrap: wrap; gap: 6px; }
.picks label { position: relative; cursor: pointer; }
.picks input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.picks span { display: block; padding: 8px 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px #c9cbc6; font-size: 0.86rem; line-height: 1.3; white-space: nowrap; transition: background-color 160ms, box-shadow 160ms; }
.picks input:checked + span { background: color-mix(in oklab, var(--sc-accent) 10%, white); box-shadow: inset 0 0 0 1.5px var(--sc-accent); color: color-mix(in oklab, var(--sc-accent) 82%, black); font-weight: 600; }
.picks input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.seg { display: grid; grid-template-columns: repeat(3, auto); border: 1px solid #c9cbc6; border-radius: 10px; overflow: hidden; }
.seg label { position: relative; cursor: pointer; }
.seg label + label { border-left: 1px solid #c9cbc6; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 11px 8px; text-align: center; font-size: 0.88rem; white-space: nowrap; }
.seg input:checked + span { background: color-mix(in oklab, var(--sc-accent) 10%, white); color: color-mix(in oklab, var(--sc-accent) 82%, black); font-weight: 600; }
.seg input:focus-visible + span { outline: 2px solid var(--sc-accent); outline-offset: -3px; }
.panel__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.panel__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid #e3e3e3; background: #fafaf9; }
.panel__foot .small { max-width: 24ch; }
.panel__status { padding: 0 1.25rem; font-size: 0.92rem; }
.panel__status:not(:empty) { padding-block: 0.9rem; border-top: 1px solid #e3e3e3; }
.panel__status.is-ok { color: #1f6b43; font-weight: 600; }
.panel__status.is-error { color: #a1271b; }
.panel.is-sent .panel__body { opacity: 0.6; }
.panel__note { display: none; padding: 0.9rem 1.25rem; border-top: 1px solid #e3e3e3; font-size: 0.92rem; }
.panel__note:target { display: block; }
@media (max-width: 860px) { .close__in { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .seg span { font-size: 0.8rem; padding-inline: 4px; } }

/* --------------------------------------------------------------------- footer -- */
.foot { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line-soft); }
.foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; }
.foot__brand { display: flex; align-items: center; gap: 8px; font-weight: 650; text-decoration: none; letter-spacing: -0.02em; }
.foot__brand .mark { width: 22px; height: 22px; }
.foot__in > p:first-of-type { color: var(--sc-ink-soft); font-size: 0.92rem; }
.foot__in .small { margin-left: auto; }

/* --------------------------------------------------------- pages and posts -- */
.is-page { background: var(--sc-canvas); }
.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1rem; }
.prose img { border-radius: 12px; height: auto; }
.posts__list { list-style: none; margin: 2rem 0 0; padding: 0; }
.posts__list a { display: block; padding: 1.25rem 0; border-top: 1px solid var(--line); text-decoration: none; }
.posts__list h2 { font-size: 1.3rem; letter-spacing: -0.02em; }
.posts__list p { margin-top: 0.3rem; color: var(--sc-ink-soft); }
.posts__pages { display: flex; gap: 8px; margin-top: 2rem; }

/* Everything below the hero renders only as it comes near the screen. */
.howto, .steps, .feature, .agents, .devs, .links, .feats, .pricing, .faq { content-visibility: auto; contain-intrinsic-size: auto 900px; }
/* The demos have fixed proportions, so they can skip layout until near. */
.ed, .rq, .cm { content-visibility: auto; }

/* ------------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  /* Nothing plays by itself: each demo shows its last frame and a play button. */
  .demo-play { display: grid; }
  .is-playing > .demo-play, .is-playing + .demo-play { display: none; }
  .rq .ed__cursor, .cm .ed__cursor { display: none; }
  .plane__body { transform: none !important; transition: none; }
  .ed__cursor { display: none; }
  .phone { transform: none; transition: opacity 300ms; }
  .caret { animation: none; }
  .ed__spinner { animation-duration: 2.4s; }
}
@media (hover: none), (pointer: coarse) { .ed__cursor { display: none; } }
.howto .phone { right: 2.5%; bottom: 3%; }
@media (max-width: 860px) { .howto .phone { right: 50%; bottom: 3%; } }