/* qurl.link shared stylesheet: served from this bucket (CSP style-src self). Source of truth for the landing page and the guide pages. */
:root {
  --ink: #17132b;
  --ink-soft: #4a4560;
  --quiet: #7d7792;
  --paper: #fbf8f2;
  --paper-deep: #f3eee3;
  --card: #ffffff;
  --line: rgba(23, 19, 43, 0.1);
  --line-strong: rgba(23, 19, 43, 0.18);
  --purple: #6d3bf5;
  --purple-deep: #5b2ed9;
  --purple-ink: #3b1aa3;
  --lilac: #ede6ff;
  --lilac-deep: #d9ccff;
  --lime: #d4f55a;
  --lime-deep: #b9e03a;
  --mint: #e9f2d9;
  --peach: #ffe3cf;
  --blush: #ffd1e3;
  --acorn: #b5651d;
  --threat-red: #d7263d;
  --shadow-ink: 0 2px 0 var(--ink);
  --shadow-pop: 6px 6px 0 var(--ink);
  --shadow-soft: 0 18px 50px rgba(23, 19, 43, 0.12);
  /* Strict-CSP static shell: fonts must come from this bucket. Manrope
        (the website's body face, latin subset, self-hosted below) carries
        the copy; the rounded platform face is reserved for the illustrated
        cards and the brand mark. */
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", var(--font-sans);
  --font-mono:
    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --radius: 18px;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/manrope-latin.woff2") format("woff2");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Faint dotted "sketchpad" grid behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(23, 19, 43, 0.09) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

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

.landing {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

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

/* ---------- Shared bits ---------- */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--quiet);
}

.kicker .spark {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--purple);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.1rem;
  padding: 0.75rem 1.35rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}

.button:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 var(--ink);
}

.button.lime {
  background: var(--lime);
}

.button.purple {
  background: var(--purple);
  color: #fff;
}

.button svg {
  width: 1.1rem;
  height: 1.1rem;
}

.wobble {
  display: inline-block;
  position: relative;
  color: var(--purple);
}

.wobble svg {
  position: absolute;
  left: -2%;
  bottom: -0.22em;
  width: 104%;
  height: 0.42em;
  color: var(--lime-deep);
  pointer-events: none;
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% - 6rem, 1120px);
  margin: 0 auto;
  padding: 0.9rem 0;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.brand .dot {
  color: var(--purple);
}

.brand .tld {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-weight: 700;
  font-size: 0.98rem;
}

.nav a {
  position: relative;
}

.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  border-radius: 3px;
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

.nav a:not(.nav-cta):hover::after {
  transform: scaleX(1);
}

.nav-cta {
  padding: 0.6rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--lime);
  box-shadow: 3px 3px 0 var(--ink);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.nav-cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}

.nav-cta:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ---------- Hero ---------- */

.hero {
  padding: 1.2rem 0 2.2rem;
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.65rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--mint);
  font-weight: 700;
  font-size: 0.84rem;
  box-shadow: 3px 3px 0 var(--ink);
}

.pill .spark {
  width: 1rem;
  height: 1rem;
  color: var(--purple);
}

h1 {
  margin: 0.9rem 0 0.7rem;
  font-size: clamp(2.5rem, 4.6vw, 3.9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero-text {
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero-text strong {
  color: var(--ink);
  font-weight: 800;
}

.hero-fine {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--quiet);
}

.or-cli {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--line);
}

.or-cli .kicker {
  display: block;
  margin-bottom: 0.5rem;
}

.or-cli-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.35rem 0;
}

.or-cli-line code {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--ink);
}

.or-cli-line .copy {
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  box-shadow: none;
}

.or-cli-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.5rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--purple);
}

.or-cli-more svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* The launch card: pick "ask your AI" or "use the terminal". Tabs are
      CSS-only (radio inputs) so the landing page stays script-free apart
      from the copy buttons. */
.launch {
  position: relative;
  margin-top: 1.1rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.launch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.launch-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.45rem;
  background: var(--paper-deep);
  border-bottom: 2px solid var(--ink);
}

.launch-tabs label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.7rem 1rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--quiet);
  cursor: pointer;
  transition:
    color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.launch-tabs label svg {
  width: 1.2rem;
  height: 1.2rem;
}

.launch-tabs label:hover {
  color: var(--ink);
}

#launch-app:checked ~ .launch-tabs label[for="launch-app"],
#launch-file:checked ~ .launch-tabs label[for="launch-file"] {
  color: var(--ink);
  background: var(--card);
  border-color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

#launch-app:focus-visible ~ .launch-tabs label[for="launch-app"],
#launch-file:focus-visible ~ .launch-tabs label[for="launch-file"] {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

.launch-panel {
  display: none;
  padding: 1.1rem 1.3rem 1.2rem;
}

#launch-app:checked ~ .launch-panel.app,
#launch-file:checked ~ .launch-panel.file {
  display: block;
}

.launch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.launch-label .spark {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--purple);
}

.launch-label .spark.tiny {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--quiet);
}

.launch-panel {
  container-type: inline-size;
}

/* The sentence must stay on one line: size the mono text to the card
      (66 characters at ~0.6em each), capped at the design size. */
.prompt {
  margin: 0.3rem 0 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-size: clamp(0.66rem, 2.3cqw, 0.86rem);
  line-height: 1.6;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt .url {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--purple-ink);
}

.launch-panel h3 {
  margin: 0.5rem 0 0.6rem;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.launch-panel .lede {
  margin-bottom: 1.3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.works-with {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--quiet);
}

.works-with.tested {
  margin-top: 0.3rem;
  font-weight: 500;
}

.big-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 3.3rem;
  padding: 0.75rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1;
  text-align: left;
  box-shadow: 4px 4px 0 var(--ink);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.big-button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--lime-deep);
}

.big-button:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--ink);
}

.big-button .lead,
.big-button .idle,
.big-button .done {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.big-button svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.big-button .done {
  display: none;
}

.big-button.copied .idle {
  display: none;
}

.big-button.copied .done {
  display: inline-flex;
}

.launch-fine {
  margin-top: 0.9rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--quiet);
}

.launch-foot {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.launch-foot a {
  color: var(--purple);
  font-weight: 800;
  border-bottom: 2px solid var(--lilac-deep);
}

.launch-foot a:hover {
  border-bottom-color: var(--purple);
}

.launch-foot.green {
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.9rem;
  color: #3f6b12;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.hero-links a:hover {
  color: var(--purple);
}

/* ---------- Hero scene (the squirrel) ---------- */

.scene {
  position: relative;
  min-height: 470px;
}

.scene-window,
.scene-note,
.scene-ledge,
.marquee,
.access-brand span,
.compare-row.head .us {
  font-family: var(--font-display);
}

.scene-window {
  position: absolute;
  top: 9%;
  left: 4%;
  width: 68%;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--lilac);
  box-shadow: var(--shadow-pop);
  transform: rotate(-3deg);
}

.scene-window .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 2px solid var(--ink);
  background: #f6f1ff;
  border-radius: 14px 14px 0 0;
}

.scene-window .dots {
  display: flex;
  gap: 0.35rem;
}

.scene-window .dots i {
  width: 0.6rem;
  height: 0.6rem;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
}

.scene-window .bar .kicker {
  font-size: 0.6rem;
}

.scene-window .bar svg {
  width: 0.9rem;
  height: 0.9rem;
}

.scene-window .body {
  padding: 1.3rem 1.3rem 2.6rem;
}

.scene-window .body strong {
  display: block;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.scene-window .skeleton {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.scene-window .skeleton i {
  display: block;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--lilac-deep);
}

.scene-window .skeleton i:nth-child(2) {
  width: 70%;
}

.scene-window .skeleton i:nth-child(3) {
  width: 45%;
  background: var(--lime);
}

.scene-note {
  position: absolute;
  right: 0;
  top: 40%;
  z-index: 3;
  width: 46%;
  padding: 1.1rem 1.1rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
  transform: rotate(4deg);
}

.scene-note::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 50%;
  width: 4.2rem;
  height: 1.3rem;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(212, 245, 90, 0.85);
  border: 1px solid rgba(23, 19, 43, 0.25);
}

.scene-note .kicker {
  font-size: 0.58rem;
}

.scene-note strong {
  display: block;
  margin: 0.45rem 0 0.6rem;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.scene-note .tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 2px dashed var(--line);
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--purple-ink);
}

.scene-note .tag svg {
  width: 0.95rem;
  height: 0.95rem;
}

.scene-squrl {
  position: absolute;
  left: -2%;
  bottom: 42px;
  z-index: 2;
  width: 64%;
  max-width: 400px;
  filter: drop-shadow(0 10px 18px rgba(23, 19, 43, 0.14));
}

.scene-cloud {
  position: absolute;
  top: -4%;
  right: 24%;
  width: 20%;
  z-index: 0;
}

.scene-spark {
  position: absolute;
  bottom: 30%;
  left: -1%;
  width: 6%;
  z-index: 3;
}

.scene-ledge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  padding: 0.95rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-pop);
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.scene-ledge span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.scene-ledge i {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 2px solid var(--purple);
  border-radius: 50%;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--purple);
}

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--purple);
  color: #fff;
  transform: rotate(-1deg) scale(1.02);
  margin: 1rem 0 0;
}

.marquee-track {
  display: flex;
  width: max-content;
  gap: 0;
}

.marquee-track ul {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 0.7rem 1.1rem;
  list-style: none;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.marquee-track li {
  display: inline-flex;
  align-items: center;
  gap: 2.2rem;
}

.marquee-track li::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--lime);
}

/* ---------- Sections ---------- */

.section {
  padding: 6rem 0;
}

.section-head {
  max-width: 42rem;
}

.section-head h2,
.final h2 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.why-cards .section-head {
  max-width: none;
}

.section-head h2 .nowrap {
  white-space: nowrap;
}

.section-head h2 .wobble svg {
  bottom: -0.16em;
}

.section-head p {
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Steps */

.section-head {
  position: relative;
}

.head-sticker {
  position: absolute;
  right: -14rem;
  top: 0.2rem;
  width: 190px;
  transform: rotate(-4deg);
}

.steps-loop {
  position: absolute;
  left: 29%;
  top: -3.2rem;
  width: 110px;
  z-index: 1;
  opacity: 0.95;
}

.step-sticker {
  position: absolute;
  right: -1.2rem;
  top: -1.9rem;
  width: 120px;
  transform: rotate(6deg);
  z-index: 2;
}

.moments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 3rem;
  border-top: 2px solid var(--line-strong);
}

.moment {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 1.4rem 1.2rem 1.4rem 0;
}

.moment + .moment {
  padding-left: 1.6rem;
  border-left: 2px solid var(--line-strong);
}

.moment-num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--quiet);
}

.moment svg {
  width: 2rem;
  height: 2rem;
  color: var(--purple);
}

.moment strong {
  display: block;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.moment span:not(.moment-num) {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 3rem;
}

.step {
  position: relative;
  padding: 1.6rem 1.5rem 1.5rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

.step:hover {
  transform: translate(-2px, -3px) rotate(-0.6deg);
  box-shadow: 8px 9px 0 var(--ink);
}

.step:nth-child(2):hover {
  transform: translate(0, -3px);
}

.step:nth-child(3):hover {
  transform: translate(2px, -3px) rotate(0.6deg);
}

.step-number {
  position: absolute;
  top: -1rem;
  left: 1.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
  font-weight: 800;
  font-size: 0.95rem;
}

.step-art {
  height: 118px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--lilac);
  border: 2px dashed var(--lilac-deep);
}

.step:nth-child(2) .step-art {
  background: var(--mint);
  border-color: #cfe3a7;
}

.step:nth-child(3) .step-art {
  background: var(--peach);
  border-color: #f3c7a4;
}

.step-art svg {
  width: 150px;
  height: 92px;
  overflow: visible;
}

.step h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.step p {
  margin-top: 0.5rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.step code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--paper-deep);
  color: var(--purple-ink);
}

.steps-after {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink-soft);
}

.steps-after svg {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
}

/* Why (comparison) */

.section.why {
  position: relative;
  margin-top: 1rem;
  padding-top: 6rem;
  background: var(--lilac);
  overflow: hidden;
}

.why .wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 56px;
}

.why-land {
  position: absolute;
  right: -1%;
  top: 1rem;
  width: min(28%, 360px);
  pointer-events: none;
}

.why-head {
  position: relative;
  padding-right: 28%;
}

.cases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2.6rem;
}

.case {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.3rem 1.25rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

.case:hover {
  transform: translate(-2px, -3px);
  box-shadow: 8px 9px 0 var(--ink);
}

.case > svg {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.45rem;
  border: 2px solid var(--purple-ink);
  border-radius: 10px;
  background: var(--lilac);
  color: var(--purple-ink);
  margin-bottom: 0.4rem;
}

.case strong {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.case p {
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.case > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--purple);
}

.case > span svg {
  width: 0.9rem;
  height: 0.9rem;
}

.compare-section {
  padding: 1rem 0 3rem;
}

.why-head h2 .accent {
  color: var(--purple);
}

.why-blurb {
  max-width: 22rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.why-compare {
  margin-top: 0;
}

.compare-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.compare-head h3 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.compare-switch {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.compare-toggle {
  display: none;
}

.compare {
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.compare-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1.4fr;
}

.compare-row + .compare-row {
  border-top: 2px solid var(--ink);
}

.compare-row > div {
  padding: 1.1rem 1.25rem;
}

.compare-row > div + div {
  border-left: 2px solid var(--ink);
}

.compare-row.head > div {
  background: var(--lilac-deep);
  font-weight: 800;
  font-size: 1.05rem;
}

.compare-row.head .us {
  background: var(--lime);
  color: var(--ink);
  font-size: 1.3rem;
}

.compare-row .dot {
  display: inline;
  margin: 0;
  font-size: inherit;
  color: var(--purple-ink);
}

.compare-row .label,
.compare-row .them {
  background: var(--lilac);
}

.compare-row .label {
  font-weight: 700;
  color: var(--purple-ink);
  font-size: 0.92rem;
}

.compare-row strong {
  display: block;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.compare-row span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.compare-row .us {
  background: var(--mint);
}

.compare-row .them span {
  color: var(--ink-soft);
}

.compare .head small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--quiet);
  margin-top: 0.2rem;
}

details.footnote {
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

details.footnote summary {
  cursor: pointer;
  font-weight: 800;
  color: var(--ink);
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

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

details.footnote summary::after {
  content: "+";
  font-weight: 800;
  color: var(--purple);
}

details.footnote[open] summary::after {
  content: "–";
}

details.footnote p {
  margin-top: 0.6rem;
  max-width: 48rem;
  line-height: 1.55;
}

/* Links from the comparison to the full write-ups on layerv.ai */

.compare-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.1rem;
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.compare-more a {
  font-weight: 700;
  color: var(--purple-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lilac-deep);
  text-underline-offset: 3px;
}

.compare-more a:hover {
  text-decoration-color: var(--purple);
}

/* FAQ */

.faq-section {
  padding: 3rem 0 6rem;
}

/* The heading sits in a column of its own and stays in view while the
   questions scroll past it. */
.faq-section .wrap {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
  column-gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.faq-section .section-head {
  position: sticky;
  top: 1.5rem;
}

.faq-list {
  display: grid;
  gap: 0.8rem;
}

/* One column: the heading reads once at the top and scrolls away. */
@media (max-width: 900px) {
  .faq-section .wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq-section .section-head {
    position: relative;
    top: auto;
  }

  .faq-list {
    margin-top: 2.2rem;
  }
}

.faq-item {
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.faq-item[open] {
  box-shadow: var(--shadow-pop);
  transform: translate(-2px, -2px);
}

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.2rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex: none;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--purple);
}

.faq-item[open] summary::after {
  content: "–";
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
  border-radius: 12px;
}

.faq-item p {
  padding: 0 1.2rem 1.15rem;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* Links from an answer to the step-by-step guide on layerv.ai */

.faq-item p a {
  font-weight: 700;
  color: var(--purple-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--lilac-deep);
  text-underline-offset: 3px;
}

.faq-item p a:hover {
  text-decoration-color: var(--purple);
}

.faq-item p code {
  font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item[open] {
    transition: none;
    transform: none;
  }
}

/* Received a Qurl */

.received {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

.door {
  position: relative;
  min-height: 340px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--peach);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
}

.door-squrl {
  position: absolute;
  left: 8%;
  bottom: -6%;
  width: 62%;
  filter: drop-shadow(0 12px 16px rgba(23, 19, 43, 0.14));
}

.door-dash {
  position: absolute;
  right: 5%;
  top: 18%;
  width: 34%;
}

.door-spark {
  position: absolute;
  left: 6%;
  top: 8%;
  width: 14%;
}

.checks {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
}

.checks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1.02rem;
}

.checks svg {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0.25rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
}

/* Wherever you build */

/* From the tools section to the end of the page, the lilac ground. */
.homes-section {
  position: relative;
  margin-top: 2rem;
  padding: 7.5rem 0 4.5rem;
  background: var(--lilac);
}

.homes-section .wave {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 56px;
}

.homes-scene {
  position: relative;
  margin-top: 1.5rem;
  aspect-ratio: 100 / 62;
}

.homes-land {
  position: absolute;
  left: 6%;
  bottom: 0;
  width: 78%;
}

.homes-squrl {
  position: absolute;
  left: 22%;
  bottom: 11%;
  width: 48%;
  filter: drop-shadow(0 10px 14px rgba(23, 19, 43, 0.12));
}

.homes-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 3rem;
  align-items: start;
}

.homes-intro h2 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.homes {
  list-style: none;
  border-top: 2px solid var(--line-strong);
  margin-top: 0.4rem;
}

.home {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.1rem;
  padding: 1.2rem 0.4rem;
  border-bottom: 2px solid var(--line-strong);
  transition:
    background 140ms ease,
    padding 140ms ease;
}

.home:hover {
  background: rgba(255, 255, 255, 0.55);
  padding-left: 0.8rem;
}

.homes-section .homes,
.homes-section .home {
  border-color: rgba(23, 19, 43, 0.16);
}

.home .ico {
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.45rem;
  border: 2px solid var(--purple-ink);
  border-radius: 10px;
  background: var(--lilac);
  color: var(--purple-ink);
}

.home strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.home em {
  display: block;
  margin-top: 0.15rem;
  font-style: normal;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.home > svg:last-child {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--purple);
  transition: transform 140ms ease;
}

.home:hover > svg:last-child {
  transform: translate(3px, -3px);
}

/* Final */

.final {
  position: relative;
  padding: 3rem 0 4.5rem;
  background: var(--lilac);
  /* The rays doodle hangs past the wrap; on a phone that widened the page. */
  overflow-x: clip;
}

.final-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3rem;
  align-items: center;
}

.final-tree-left {
  position: absolute;
  left: -9rem;
  bottom: -1.5rem;
  width: 110px;
  opacity: 0.9;
}

.final-copy h2 {
  margin-top: 0.9rem;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.final-copy p {
  margin-top: 1rem;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.final-copy p a {
  color: var(--ink);
  font-weight: 700;
  border-bottom: 2px solid var(--lilac-deep);
}

.final-action {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 2rem 0 2rem 7rem;
}

.final-action .button {
  position: relative;
  z-index: 1;
  font-size: 1.1rem;
  padding: 1rem 1.5rem;
}

.final-trees {
  position: absolute;
  left: 0;
  bottom: 0.4rem;
  width: 150px;
}

.final-plane {
  position: absolute;
  left: 6rem;
  top: -2.4rem;
  width: 110px;
  transform: scaleX(-1) rotate(8deg);
  opacity: 0.9;
}

.final-rays {
  position: absolute;
  right: -2.6rem;
  top: 0.2rem;
  width: 46px;
  transform: scaleX(-1);
}

/* The CRID help paragraph sits between the lilac main and the lilac footer.
  Hide it visually only when the head script runs. Readers without script
  or styles and the CRID state still get the help text. */
html[data-scripted]:not(.crid) .crid-help {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Footer */

.footer {
  padding: 1rem 0 2rem;
  background: var(--lilac);
}

.footer-card {
  position: relative;
  padding: 3rem 3rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: 26px;
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
  box-shadow: 8px 8px 0 var(--lilac-deep);
  overflow: visible;
  border-color: var(--ink);
}

.footer-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  pointer-events: none;
}

.footer-peek {
  position: absolute;
  right: 2.5rem;
  bottom: calc(100% - 4px);
  width: 190px;
  z-index: 2;
  filter: drop-shadow(0 8px 12px rgba(23, 19, 43, 0.18));
  pointer-events: none;
}

.footer-land {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(34%, 380px);
  border-radius: 0 0 24px 0;
  opacity: 0.22;
  pointer-events: none;
}

.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  padding-right: 10rem;
}

.footer-brand .brand {
  color: #fff;
}

.footer-brand .brand .tld {
  color: rgba(255, 255, 255, 0.6);
}

.footer-brand p {
  max-width: 22rem;
  margin-top: 0.9rem;
  font-size: 1rem;
  line-height: 1.55;
}

.footer-brand .footer-maker {
  margin-top: 1.2rem;
  font-size: 0.88rem;
  opacity: 0.8;
}

.footer-maker a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.3rem;
  padding: 0.65rem 1.1rem;
  border: 2px solid var(--lime);
  border-radius: 12px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.25);
  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}

.footer-cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.3);
}

.footer-cta svg {
  width: 1rem;
  height: 1rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.footer-cols strong {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}

.footer-cols a {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.footer-cols a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--lime);
  text-underline-offset: 4px;
}

.footer-cols a svg {
  width: 0.8rem;
  height: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

.footer-base {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-links {
  display: flex;
  gap: 1.2rem;
}

.footer-links a {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover {
  color: var(--lime);
}

/* ---------- Motion ---------- */

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-9px);
  }
}

@keyframes twinkle {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }

  50% {
    transform: scale(0.55) rotate(25deg);
    opacity: 0.55;
  }
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy,
  .scene,
  .step,
  .home,
  .fact {
    animation: enter 620ms ease both;
  }

  .scene {
    animation-delay: 80ms;
  }

  .step:nth-child(2),
  .home:nth-child(2),
  .fact:nth-child(2) {
    animation-delay: 90ms;
  }

  .step:nth-child(3),
  .home:nth-child(3),
  .fact:nth-child(3) {
    animation-delay: 160ms;
  }

  .home:nth-child(4) {
    animation-delay: 230ms;
  }

  .scene .spark,
  .final-card .spark {
    animation: twinkle 3.2s ease-in-out infinite;
  }

  .scene .spark.b,
  .final-card .spark.b {
    animation-delay: 1.1s;
  }

  .scene .spark.c {
    animation-delay: 2s;
  }

  .marquee-track {
    animation: scroll-left 32s linear infinite;
  }

  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}

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

  .spinner {
    animation-duration: 1.6s;
  }

  .marquee-track {
    animation: scroll-left 90s linear infinite;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1040px) {
  .head-sticker,
  .final-tree-left {
    display: none;
  }

  .why-land {
    width: 30%;
    opacity: 0.8;
  }
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  h1 {
    font-size: clamp(2.6rem, 7vw, 3.6rem);
  }

  .hero-text {
    font-size: 1.15rem;
  }

  .launch {
    max-width: 640px;
  }

  .scene {
    min-height: 440px;
    max-width: 560px;
  }

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

  .received,
  .why-head,
  .homes-grid,
  .final-grid {
    grid-template-columns: 1fr;
  }

  .why-land {
    display: none;
  }

  .why-head {
    padding-right: 0;
  }

  .moments {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .moment + .moment {
    padding-left: 0;
    border-left: 0;
  }

  .moment {
    padding: 0.4rem 0;
  }

  .final-action {
    padding-left: 0;
    padding-right: 7rem;
  }

  .final-trees {
    left: auto;
    right: 0;
  }

  .final-plane {
    display: none;
  }

  .footer-card {
    padding: 2.4rem 1.5rem 1.4rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-right: 0;
  }

  .footer-peek {
    right: 1rem;
    width: 140px;
  }

  .footer-land {
    display: none;
  }

  .nav a:not(.nav-cta) {
    display: none;
  }
}

@media (max-width: 560px) {
  .section {
    padding: 4rem 0;
  }

  h1 {
    font-size: 2.7rem;
  }

  .hero-text {
    font-size: 1.05rem;
  }

  .launch-tabs label {
    font-size: 0.9rem;
    padding: 0.85rem 0.6rem;
  }

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

  .copy {
    justify-self: start;
  }

  .scene {
    min-height: 400px;
  }

  .scene-note {
    width: 56%;
    top: 40%;
  }

  .scene-ledge {
    font-size: 0.8rem;
    padding: 0.8rem 0.6rem;
  }

  .scene-squrl {
    bottom: 44px;
    width: 70%;
  }

  /* One column at a time on phones: a toggle picks qURL or the tunnel. */
  .compare-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
    padding: 0.4rem;
    margin-bottom: 0.9rem;
    border: 2px solid var(--ink);
    border-radius: 14px;
    background: var(--paper-deep);
  }

  .compare-toggle label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 0.8rem;
    border: 2px solid transparent;
    border-radius: 10px;
    font-weight: 800;
    color: var(--quiet);
    cursor: pointer;
  }

  .compare-toggle label:first-child {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: -0.04em;
  }

  .compare-toggle .dot {
    color: var(--purple);
  }

  #compare-us:checked ~ .compare-toggle label[for="compare-us"] {
    background: var(--lime);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
  }

  #compare-them:checked ~ .compare-toggle label[for="compare-them"] {
    background: var(--lilac-deep);
    border-color: var(--ink);
    color: var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
  }

  #compare-us:focus-visible ~ .compare-toggle label[for="compare-us"],
  #compare-them:focus-visible ~ .compare-toggle label[for="compare-them"] {
    outline: 3px solid var(--purple);
    outline-offset: 2px;
  }

  .compare-row.head {
    display: none;
  }

  .compare-row {
    grid-template-columns: 1fr;
  }

  .compare-row > div {
    padding: 0.9rem 1rem;
  }

  .compare-row > div + div {
    border-left: 0;
  }

  .compare-row .label {
    padding-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  #compare-us:checked ~ .compare .them,
  #compare-them:checked ~ .compare .us {
    display: none;
  }

  /* The whole card takes the selected column's colour. */
  #compare-us:checked ~ .compare .label {
    background: var(--mint);
    color: #3f6b12;
  }

  #compare-us:checked ~ .compare .compare-row + .compare-row {
    border-top-color: var(--ink);
  }

  .steps-loop,
  .step-sticker {
    display: none;
  }

  .footer-cols {
    grid-template-columns: 1fr 1fr;
  }

  .footer-base {
    flex-direction: column;
    align-items: flex-start;
  }

  .brand {
    font-size: 1.7rem;
  }

  .marquee {
    transform: none;
  }
}

/* ---------- Copy buttons (shared) ---------- */

.copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.1rem;
  padding: 0.35rem 0.7rem;
  border: 2px solid var(--ink);
  border-radius: 9px;
  background: var(--card);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink);
  transition:
    transform 100ms ease,
    box-shadow 100ms ease,
    background 120ms ease;
}

.copy:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

.copy .done {
  display: none;
}

.copy.copied .idle {
  display: none;
}

.copy.copied .done {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ---------- Open strip (home) ---------- */

.open-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 1rem;
  padding: 1.4rem 0 0.4rem;
  font-size: 1.02rem;
  color: var(--ink-soft);
}

.open-strip a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 2px solid var(--lime);
}

.open-strip a:hover {
  color: var(--purple);
}

.open-strip img {
  width: 3.2rem;
  transform: rotate(10deg);
}

.code {
  position: relative;
  margin-top: 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--lilac-deep);
  overflow: hidden;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 2px solid var(--ink);
  background: var(--lilac);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-ink);
}

.code pre {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.code pre .c {
  color: var(--quiet);
}

.code pre .p {
  color: var(--purple);
  font-weight: 700;
  user-select: none;
}

.code .copy {
  min-height: 1.8rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.74rem;
  background: var(--card);
}

.code .copy:hover {
  background: var(--lime);
}

.code .copy.copied {
  background: var(--lime);
}

.how-list {
  list-style: none;
  counter-reset: how;
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}

.how-list li {
  counter-increment: how;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.how-list li > * {
  grid-column: 2;
}

.how-list li::before {
  grid-row: 1 / span 2;
  content: counter(how);
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
  font-weight: 800;
  font-size: 0.95rem;
}

.how-list strong {
  display: block;
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.how-list p {
  margin-top: 0.2rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

.how-list code,
.page-section p code,
.page-section li code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--paper-deep);
  color: var(--purple-ink);
}

.checks-plain {
  list-style: none;
  display: grid;
  gap: 0.6rem;
  margin-top: 1rem;
}

.checks-plain li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.5;
}

.checks-plain svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.22rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
}

@media (max-width: 560px) {
  .open-strip img {
    display: none;
  }
}

.nav-work {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--ink-soft);
}

.nav-work svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--purple);
}

/* ---------- Popups ---------- */

.modal {
  width: min(100% - 2rem, 680px);
  max-height: calc(100dvh - 3rem);
  margin: auto;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  box-shadow:
    var(--shadow-pop),
    0 30px 80px rgba(23, 19, 43, 0.25);
  overflow: auto;
  overscroll-behavior: contain;
}

.modal::backdrop {
  background: rgba(23, 19, 43, 0.55);
  backdrop-filter: blur(2px);
}

.modal-card {
  position: relative;
  padding: 2rem 2.2rem 2.2rem;
}

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  margin: -0.4rem -0.6rem 0 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  box-shadow: 2px 2px 0 var(--ink);
  z-index: 2;
}

.modal-close svg {
  width: 1rem;
  height: 1rem;
}

.modal-close:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}

.modal h2 {
  margin: 0.7rem 3rem 0.6rem 0;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.modal h3 {
  margin-top: 1.6rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modal-lede,
.modal-text {
  margin-top: 0.5rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.modal-text {
  margin-top: 0.8rem;
  font-size: 0.95rem;
}

.modal .how-list {
  margin-top: 1.1rem;
  gap: 0.35rem;
}

.say-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--lilac);
}

.say-list h3 {
  margin: 0 0 0.15rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.say-list p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  font-size: 0.92rem;
  line-height: 1.45;
}

.say-list q {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.say-list span {
  color: var(--ink-soft);
}

.modal .how-list li::before {
  width: 1.9rem;
  height: 1.9rem;
  font-size: 0.85rem;
}

.modal .how-list li {
  grid-template-columns: 1.9rem minmax(0, 1fr);
}

.modal .how-list strong,
.modal .how-list summary {
  font-size: 1rem;
}

.how-list details {
  min-width: 0;
}

.how-list summary {
  position: relative;
  display: block;
  padding-right: 2.2rem;
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 2.2rem;
}

.how-list summary::-webkit-details-marker {
  display: none;
}

.how-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--purple-ink);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
}

.how-list details[open] summary::after {
  content: "–";
}

.how-list details p {
  margin-top: 0.2rem;
  padding-bottom: 0.4rem;
}

.modal-more {
  margin-top: 1.3rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--line);
}

.modal-more summary {
  position: relative;
  display: block;
  padding-right: 2.2rem;
  list-style: none;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.modal-more summary::-webkit-details-marker {
  display: none;
}

.modal-more summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  display: inline-grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--purple-ink);
  font-size: 0.9rem;
  line-height: 1;
  transform: translateY(-50%);
}

.modal-more[open] summary::after {
  content: "–";
}

.modal .how-list p {
  font-size: 0.93rem;
}

.modal .code {
  margin-top: 0.9rem;
}

.modal .code pre {
  font-size: 0.84rem;
  padding: 0.85rem 1rem;
}

.modal .code pre .url {
  color: var(--purple-ink);
}

.modal .big-button {
  margin-top: 1.2rem;
}

.modal .launch-fine {
  text-align: left;
  margin-top: 0.6rem;
}

.modal .checks-plain {
  margin-top: 1.4rem;
  font-size: 0.95rem;
}

.modal-foot {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.modal a:not(.big-button):not(.button) {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--purple);
  font-weight: 700;
  border-bottom: 2px solid var(--lilac-deep);
}

.modal a:not(.big-button):not(.button) svg {
  width: 0.85rem;
  height: 0.85rem;
}

.modal code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: var(--paper-deep);
  color: var(--purple-ink);
}

.modal .code code,
.modal pre code {
  padding: 0;
  background: none;
  color: inherit;
}

.open-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.open-form input {
  min-width: 0;
  padding: 0.8rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--ink);
}

.open-form input:focus {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

.open-form .button {
  min-height: 0;
  padding: 0.6rem 1.2rem;
  box-shadow: 4px 4px 0 var(--ink);
}

.open-result > * {
  display: none;
  margin-top: 1rem;
}

.open-result.crid .open-crid-note,
.open-result.unknown .open-unknown-note {
  display: block;
}

.open-crid-note p,
.open-unknown-note {
  line-height: 1.5;
  color: var(--ink-soft);
}

.open-crid-note p + .code {
  margin-top: 0.7rem;
}

.open-crid-note .code + p {
  margin-top: 0.8rem;
}

@media (max-width: 1040px) {
  .cases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Stack the hero before the launch card gets too narrow for the one-line prompt. */
@media (max-width: 1000px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .scene {
    min-height: 440px;
    max-width: 560px;
  }

  .launch {
    max-width: 640px;
  }

  h1 {
    font-size: clamp(2.6rem, 7vw, 3.6rem);
  }

  .hero-text {
    font-size: 1.15rem;
  }
}

@media (max-width: 900px) {
  .why-head {
    padding-right: 0;
  }

  /* Stacked layout: the tools sit right under the heading, no illustration. */
  .homes-scene {
    display: none;
  }
}

@media (max-width: 560px) {
  .wrap,
  .topbar {
    width: min(100% - 2.5rem, 1120px);
  }

  .prompt {
    white-space: normal;
    font-size: 0.84rem;
  }

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

  .modal {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .modal-card {
    padding: 1.4rem 1.25rem 3rem;
  }

  .modal-close {
    margin-right: -0.2rem;
  }

  .open-form {
    grid-template-columns: 1fr;
  }

  .open-form .button {
    width: 100%;
  }
}

/* ---------- Why cards ---------- */

.why-cards {
  padding: 6rem 0 3rem;
}

.reasons {
  margin-top: 2.6rem;
}

.step-number svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--ink);
}

.compare-section {
  padding: 4rem 0 3rem;
}

/* ---------- CLI steps ---------- */

.cli-section {
  padding-top: 1rem;
}

.cli-steps {
  list-style: none;
  display: grid;
  gap: 0.8rem;
  margin-top: 2rem;
}

.cli-step {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.cli-num {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lime);
  font-weight: 800;
}

.cli-step.zero .cli-num {
  background: var(--paper-deep);
  color: var(--quiet);
}

.cli-cmd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--lilac-deep);
}

.cli-cmd code {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.cli-body p {
  margin-top: 0.55rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.cli-body small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.88rem;
  color: var(--quiet);
}

.cli-body a,
.cli-foot a {
  color: var(--purple);
  font-weight: 700;
  border-bottom: 2px solid var(--lilac-deep);
}

.cli-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
  font-size: 0.95rem;
  color: var(--quiet);
}

.cli-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.cli-foot svg {
  width: 0.85rem;
  height: 0.85rem;
}

.modal-lede small {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--quiet);
}

.modal-text small {
  color: var(--quiet);
}

@media (max-width: 560px) {
  .cli-cmd {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .or-cli-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
  }
}

/* ---------- "Open it here" card (in the use-case band) ---------- */

.open-card {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2.2rem;
  padding: 1.2rem 1.5rem 1.2rem 1.3rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
  transition:
    transform 140ms ease,
    box-shadow 140ms ease;
}

.open-card:hover {
  transform: translate(-2px, -3px) rotate(-0.4deg);
  box-shadow: 8px 9px 0 var(--ink);
}

.open-card:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.open-card img {
  width: 3.4rem;
  flex: none;
  transform: rotate(10deg);
  transition: transform 200ms ease;
}

.open-card:hover img {
  transform: rotate(25deg) scale(1.1);
}

.open-card-text {
  flex: 1;
  min-width: 0;
}

.open-card-text strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.open-card-text em {
  display: block;
  margin-top: 0.2rem;
  font-style: normal;
  color: var(--ink-soft);
}

.open-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding: 0.8rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--lime);
  font-weight: 800;
  box-shadow: 3px 3px 0 var(--ink);
}

.open-card-btn svg {
  width: 1rem;
  height: 1rem;
}

@media (max-width: 560px) {
  .open-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .open-card-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Compare page (/compare) ---------- */

.compare-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-weight: 800;
  color: var(--purple);
}

.compare-more svg {
  width: 1rem;
  height: 1rem;
}

.page-hero {
  padding: 3.5rem 0 2rem;
}

.page-hero h1 {
  max-width: 18em;
  margin-top: 0.9rem;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.page-lede {
  max-width: 40rem;
  margin-top: 1.2rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-section {
  padding: 2.5rem 0;
}

.options-note a {
  color: var(--purple);
  font-weight: 700;
}

.verdicts {
  display: grid;
  gap: 0.7rem;
  max-width: 52rem;
  margin-top: 1.8rem;
  list-style: none;
}

.verdicts li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--card);
}

.verdicts span {
  line-height: 1.4;
  color: var(--ink-soft);
}

.verdicts strong {
  flex-shrink: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--purple-ink);
  font-weight: 800;
  white-space: nowrap;
}

.options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

.option {
  display: flex;
  flex-direction: column;
  padding: 1.3rem 1.25rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-pop);
}

.option.us {
  background: var(--mint);
}

.option h3 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.option h3 .dot {
  color: var(--purple);
}

.option > p:not(.option-what) {
  margin-top: 0.5rem;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.verdicts strong a {
  color: inherit;
}

.option-what {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  color: var(--quiet);
}

.option dl {
  margin-top: 1rem;
}

.option dt {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--purple-ink);
}

.option dd {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.maker {
  max-width: 46rem;
  margin-top: 1.6rem;
  padding: 1.1rem 1.3rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-ink);
}

.maker h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.maker p {
  margin-top: 0.35rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.maker a {
  color: var(--purple-ink);
  font-weight: 700;
}

.options-note {
  max-width: 46rem;
  margin-top: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--quiet);
}

@media (max-width: 1040px) {
  .options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .verdicts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ---------- Hero: the main line and the approve card ---------- */

/* The line under the headline is the page's main message: full ink, larger. */
.hero-text {
  max-width: 34rem;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}

/* The note in the drawing shows the product moment: someone asks, you say yes. */
.scene-ask .kicker {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: none;
}

.ask-who {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.55rem 0 0.7rem;
}

.ask-who i {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--lilac);
  color: var(--purple-ink);
  font-style: normal;
  font-weight: 800;
}

.scene-ask .ask-who strong {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
}

.ask-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ask-actions b {
  padding: 0.3rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--lime);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 0.85rem;
  font-weight: 800;
}

.ask-actions em {
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 700;
  color: var(--quiet);
}

/* ---------- Phone cleanup ---------- */

/* A command flag such as --allow-requests wraps as one piece, never at its hyphens. */
.code pre .nowrap {
  white-space: nowrap;
}

/* Decorations that hang past the edge (the rays by the last button) must not
  widen the page: on a phone a wider page shrinks everything and pushes the right
  edge of each popup, and its close button, off the screen. `clip` keeps sticky
  and scrolling as they are; `hidden` above stays for browsers without it. */
html,
body {
  overflow-x: clip;
}

@media (max-width: 900px) {
  .final-rays {
    right: 0.5rem;
  }

  .compare-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* Tablets: the three why cards fit side by side; stacked they only add height. */
@media (min-width: 561px) and (max-width: 900px) {
  .reasons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .reasons .step {
    padding: 1.6rem 1rem 1.1rem;
  }

  .reasons .step-art {
    height: 84px;
  }

  .reasons .step-art svg {
    width: 110px;
    height: 68px;
  }
}

@media (max-width: 560px) {
  .section {
    padding: 3rem 0;
  }

  .compare-section {
    padding: 0.5rem 0 2.5rem;
  }

  /* The prompt is the thing to copy: show the whole skill address, wrapped. */
  .prompt,
  .prompt .url {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .prompt {
    font-size: 0.74rem;
  }

  .hero-text {
    font-size: 1.1rem;
  }

  .scene-ask .ask-who strong {
    font-size: 1.05rem;
  }

  .ask-who i {
    width: 1.7rem;
    height: 1.7rem;
  }

  .ask-actions b,
  .ask-actions em {
    font-size: 0.78rem;
  }

  /* A smaller illustration, so the cards below it start sooner. */
  .scene {
    min-height: 330px;
  }

  .scene-cloud,
  .scene-spark {
    display: none;
  }

  .scene-window {
    top: 2%;
  }

  .scene-note {
    top: 18%;
    width: 60%;
    padding: 0.9rem 0.9rem 0.8rem;
  }

  .scene-ask .tag {
    font-size: 0.62rem;
  }

  .scene-squrl {
    bottom: 40px;
    width: 62%;
  }

  /* Use cases: icon beside the text, not above it. */
  .cases {
    gap: 0.9rem;
    margin-top: 1.8rem;
  }

  .case {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    row-gap: 0.3rem;
    padding: 1rem;
  }

  .case > svg {
    grid-row: span 3;
    margin-bottom: 0;
  }

  /* Why cards: the words carry it on a phone; the drawings only add height. */
  .reasons {
    gap: 1.6rem;
    margin-top: 2rem;
  }

  .reasons .step {
    padding: 1.6rem 1.2rem 1.2rem;
  }

  .reasons .step-art {
    display: none;
  }

  .compare-head h3 {
    font-size: 1.9rem;
  }

  .compare-more {
    display: inline;
  }

  .compare-more svg {
    display: inline;
    vertical-align: -0.15em;
  }

  .final-action {
    padding: 1.5rem 7rem 1.5rem 0;
  }

  /* Compare page */
  .page-hero {
    padding: 2rem 0 1rem;
  }

  .page-hero h1 {
    font-size: 2.3rem;
  }

  .page-lede {
    font-size: 1.05rem;
  }

  .page-section {
    padding: 2rem 0;
  }

  .verdicts strong {
    white-space: normal;
  }

  .options {
    gap: 0.9rem;
    margin-top: 1.5rem;
  }

  .option {
    padding: 1rem 1.1rem;
  }

  .option dt {
    margin-top: 0.7rem;
  }
}

/* "Good for" examples at the foot of each use-case card. */
.case .case-for {
  flex: 0 0 auto;
  margin-top: auto;
  min-height: 4.4rem;
  padding-top: 0.6rem;
  border-top: 2px dashed var(--line-strong);
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.case .case-for span {
  display: block;
  margin-bottom: 0.1rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--quiet);
}

.case > p:not(.case-for) {
  flex: 0 0 auto;
}

/* Phone: icon on the left, everything else in one column beside it. */
@media (max-width: 560px) {
  .case > * {
    grid-column: 2;
  }

  .case > svg {
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .case .case-for {
    min-height: 0;
  }
}

/* The Codex note under a popup's prompt block. */
.modal .how-note {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--quiet);
}

.modal .how-note a {
  color: var(--purple);
  font-weight: 700;
}