/* The sections under the hero: example chats, her poses, the memory
   track, the install band, the footer. Tokens live in base.css. */

.jobs, .alive, .memory, .install, .footer {
  padding: clamp(4.5rem, 9vw, 7.5rem) clamp(1.25rem, 5vw, 4.5rem);
}
.fine { margin-top: 1.4rem; font-size: 0.85rem; color: var(--ink-soft); }

/* Example chats: the app's own bubbles (blue = you, paper = her). */
.jobs { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.jobs-head { position: sticky; top: 2rem; }
.jobs-head p { margin-top: 1.1rem; max-width: 32em; color: var(--ink-soft); }
.jobs .fine { grid-column: 2; margin-top: -1rem; }
.chats { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.6rem; }
.chat { display: grid; gap: 0.7rem; padding-left: 1.4rem; position: relative; }
.chat::before { content: ""; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--line); }
.tag { justify-self: start; padding: 0.15rem 0.8rem; border-radius: 999px; font: 1rem var(--display); color: color-mix(in srgb, var(--tag) 72%, #1d1418); background: color-mix(in srgb, var(--tag) 12%, white); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tag) 55%, white); }
.me, .her { max-width: 30rem; padding: 0.7rem 1.05rem; border-radius: 18px; line-height: 1.6; }
.me { justify-self: end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.her { justify-self: start; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -14px rgba(73, 57, 67, 0.6); border-bottom-left-radius: 6px; }
.ask { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
.ask b { padding: 0.2rem 0.9rem; border-radius: 999px; font-weight: 500; font-size: 0.9rem; box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); }
.ask b:first-child { background: var(--blue); color: #fff; }
.chat small { font-size: 0.82rem; color: var(--ink-soft); }

/* Her poses, each on a window's top edge. */
.alive { background: linear-gradient(#eef1fb, #f7eef4); text-align: center; }
.alive > p { margin: 1.1rem auto 0; max-width: 36em; color: var(--ink-soft); }
.ledges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 4vw, 3.5rem); align-items: end; margin-top: 3.5rem; }
.ledges figure { margin: 0; display: grid; justify-items: center; }
.ledges img { width: auto; max-height: 190px; }
.ledge { display: block; width: 100%; height: 30px; margin-top: -2px; border-radius: 12px 12px 0 0; background: #ecf0f8; box-shadow: 0 0 0 1px #cdd2de, 0 18px 30px -24px rgba(40, 30, 50, 0.5); }
.ledges figcaption { margin-top: 0.9rem; font: 1.15rem var(--display); }

/* Memory: four stages of getting to know each other. */
.memory-head { max-width: 40rem; }
.memory-head p { margin-top: 1.1rem; color: var(--ink-soft); }
.stages { list-style: none; margin: 3.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; position: relative; }
.stages::before { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; top: 0.45rem; height: 2px; background: linear-gradient(90deg, var(--ink-soft), var(--accent), var(--blue), var(--green)); opacity: 0.45; }
.stages li { position: relative; display: grid; gap: 0.25rem; align-content: start; padding-top: 1.6rem; }
.stages li::before { content: ""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 3px var(--dot); }
.stages li:nth-child(1) { --dot: var(--ink-soft); } .stages li:nth-child(2) { --dot: var(--accent); }
.stages li:nth-child(3) { --dot: var(--blue); } .stages li:nth-child(4) { --dot: var(--green); }
.stages b { font: 1.5rem var(--display); font-variant-numeric: tabular-nums; }
.stages span { font-size: 0.9rem; color: color-mix(in srgb, var(--dot) 62%, #1d1418); font-weight: 600; }
.stages q { quotes: none; margin-top: 0.9rem; padding: 0.7rem 1rem; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); line-height: 1.6; }
.privacy { margin-top: 3rem; max-width: 46em; padding-top: 1.4rem; border-top: 1px solid var(--line); color: var(--ink-soft); }

/* Install: the one deep-blue band, numbered because the order matters. */
.install { background: var(--deep); color: #fff; }
.install a { color: #fff; }
.steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 0.8rem; align-content: start; }
.steps li::before { content: counter(step); font: 3.6rem/1 var(--display); color: #aac4ff; }
.steps p { color: var(--deep-ink); }
.install pre { margin: 0; padding: 0.8rem 1rem; border-radius: 12px; background: rgba(10, 25, 70, 0.35); overflow-x: auto; }
.install code { font: 0.92rem/1.5 "Cascadia Mono", Consolas, monospace; color: #fff; }
.extra { margin-top: 2.6rem; max-width: 46em; color: var(--deep-ink); }
.install .cta { margin-top: 2.2rem; }
.install .meta { margin: 0; color: var(--deep-ink); }
.btn-light { padding: 0.95rem 1.7rem; background: #fff; color: var(--deep); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.55); }
.btn-light:hover { transform: translateY(-2px); }
.sha { margin-top: 1.4rem; font-size: 0.8rem; color: var(--deep-ink); overflow-wrap: anywhere; }
.sha code { font-size: 0.78rem; color: var(--deep-ink); }

.footer { display: grid; gap: 0.5rem; justify-items: start; padding-block: 3rem; font-size: 0.9rem; color: var(--ink-soft); }
.footer .fine { margin-top: 0; }

@media (max-width: 860px) {
  .jobs { grid-template-columns: 1fr; }
  .jobs-head { position: static; }
  .jobs .fine { grid-column: 1; margin-top: 0; }
  .ledges { grid-template-columns: 1fr; gap: 2.5rem; max-width: 22rem; margin-inline: auto; }
  .stages { grid-template-columns: 1fr; gap: 1.8rem; padding-left: 1.6rem; }
  .stages::before { left: 0.45rem; right: auto; top: 0.5rem; bottom: 0.5rem; width: 2px; height: auto; background: linear-gradient(var(--ink-soft), var(--accent), var(--blue), var(--green)); }
  .stages li { padding-top: 0; }
  .stages li::before { left: -1.6rem; top: 0.45rem; }
  .steps { grid-template-columns: 1fr; }
}