/* ==========================================================================
   /ai  ·  ChalkBot
   Extra scenes, still mocks, and the skill tour. The shared aidemo carousel
   still lives in chalk.css; this file only dresses the dedicated page.
   ========================================================================== */

.nav__links a[aria-current="page"] { color: var(--chalk); }

html { scroll-padding-top: 78px; }

.hero--ai { padding-bottom: 12px; }
.hero--ai .hero__inner { padding-bottom: clamp(28px, 5vh, 48px); }
.hero--ai .ai__visual { width: 100%; }
.hero--ai .ai__annot { bottom: -34px; }

/* Ten scenes on this page. Give the stage a little more room than the
   six-scene homepage, and let the dots wrap instead of overflowing. */
.hero--ai .aistage { min-height: 400px; }
.hero--ai .aidots {
  flex-wrap: wrap;
  row-gap: 7px;
  padding-top: 6px;
}
.hero--ai .aidot { width: 12px; }
.hero--ai .aidot--on { width: 22px; }

@media (max-width: 560px) {
  .hero--ai .aistage { min-height: 470px; }
}

/* ---------------------------------------------------------- jump chips */
.skilljump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 880px;
  margin: 0 auto;
  padding: 8px clamp(18px, 4vw, 44px) 48px;
}
.skilljump a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--chalk-dim);
  border: 1.4px dashed rgba(244, 240, 230, 0.28);
  border-radius: 99px;
  padding: 5px 12px;
  background: rgba(244, 240, 230, 0.04);
}
.skilljump a:hover,
.skilljump a.on {
  color: var(--chalk);
  border-style: solid;
  border-color: var(--accent-light);
}

/* ---------------------------------------------------------- skill tour */
.skill {
  padding: clamp(48px, 8vh, 92px) clamp(18px, 4vw, 44px);
}
.skill .tour__item { padding: 0; }
.skill.paper .tour__copy a { color: var(--accent); }
.skill.board .tour__copy p,
.skill.board .ticks li { color: var(--chalk-dim); }
.skill.board .tour__copy h2 { color: var(--chalk); }
.skill.board .tour__copy a { color: var(--accent-light); }

.skillhead {
  max-width: 1120px;
  margin: 0 auto 8px;
}

/* ------------------------------------------------ extra carousel pieces */
.aiq {
  background: rgba(244, 240, 230, 0.05);
  border-radius: 10px;
  padding: 6px 12px 8px;
}
.aiq__line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--chalk-dim);
  padding: 6px 0;
  border-bottom: 1px dashed rgba(244, 240, 230, 0.1);
}
.aiq__line b { color: var(--chalk); font-weight: 650; font-variant-numeric: tabular-nums; }
.aiq__total {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 2px;
  font-weight: 700;
  font-size: 14px;
  color: var(--chalk);
}
.aiq__job {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--good);
  border: 1.5px solid var(--good);
  border-radius: 99px;
  padding: 3px 10px;
  align-self: flex-start;
}

.airain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.airain__day {
  position: relative;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 9px;
  padding: 8px 6px 10px;
  min-height: 96px;
  text-align: center;
}
.airain__day b {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  margin-bottom: 4px;
}
.airain__wx {
  display: block;
  font-family: var(--hand);
  font-size: 16px;
  color: var(--accent-light);
  margin-bottom: 6px;
}
.airain__day--wet {
  background: rgba(142, 163, 179, 0.16);
}
.airain__day--wet .airain__wx { color: #8ea3b3; }
.aidock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  border: 1px dashed rgba(179, 162, 142, 0.45);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--chalk-faint);
}
.aidock__lab {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aidock .aiblk--new {
  margin: 0;
  padding: 5px 8px;
  font-size: 11px;
}

.airtn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
}
.airtn__face {
  width: 44px;
  height: 44px;
  flex: none;
}
.airtn__face circle,
.airtn__face path {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.airtn__when {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}
.airtn__ask {
  font-family: var(--hand);
  font-size: 18px;
  line-height: 1.2;
  color: var(--accent-light);
}

.airec {
  border: 1px solid rgba(244, 240, 230, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(244, 240, 230, 0.04);
}
.airec__kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.airec__name { font-weight: 650; font-size: 14.5px; margin-top: 2px; }
.airec__meta { font-size: 12.5px; color: var(--chalk-faint); }
.airec__ask {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(244, 240, 230, 0.14);
  font-family: var(--hand);
  font-size: 17px;
  color: var(--accent-light);
  line-height: 1.25;
}

@media (max-width: 560px) {
  .aiq__line { font-size: 12.5px; }
  .airain__day { min-height: 88px; }
  .airtn__ask { font-size: 16px; }
}

/* ---------------------------------------------------------- still mocks
   Default is the finished picture, so no-JS and reduced-motion stay
   readable. .play (from ai.js) replays a short rise when the panel
   scrolls into view. None of this uses .aip, which would sit at
   opacity 0 outside an .aiscene--on. */
.still {
  background: #24201a;
  color: var(--chalk);
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: 0 24px 60px rgba(28, 24, 18, 0.35);
  padding: 16px 16px 18px;
  transform: rotate(0.5deg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tour__item--flip .still { transform: rotate(-0.5deg); }
.still__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-light);
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(244, 240, 230, 0.12);
}
.still__head::before { content: "ChalkBot ·"; opacity: 0.75; }
.still__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  flex: none;
}
.still__ask {
  border: 1px solid rgba(244, 240, 230, 0.16);
  border-radius: 12px;
  background: rgba(244, 240, 230, 0.04);
  padding: 8px 11px;
  font-size: 13px;
  line-height: 1.45;
}
.still__ask--them { border-style: dashed; }
.still__who {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-light);
  border: 1px solid rgba(179, 162, 142, 0.5);
  border-radius: 99px;
  padding: 1px 7px;
  margin-right: 6px;
  vertical-align: 1px;
}
.still__bits { display: flex; flex-wrap: wrap; gap: 6px; }
.still__bit {
  font-family: var(--hand);
  font-size: 16px;
  color: var(--accent-light);
  border: 1px dashed rgba(179, 162, 142, 0.4);
  border-radius: 99px;
  padding: 1px 10px;
}
.still__say {
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 92%;
}
.still__say--out {
  background: var(--accent);
  margin-left: auto;
  border-bottom-right-radius: 5px;
}
.still__say--in {
  background: rgba(244, 240, 230, 0.1);
  border-bottom-left-radius: 5px;
}
.still__done {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--good);
  font-weight: 650;
  font-size: 13.5px;
  padding: 10px 12px;
}
.still__done::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--good);
  border-radius: 10px;
  filter: url(#chalksoft);
  pointer-events: none;
}
.still__done svg { width: 16px; height: 16px; flex: none; }
.still__done svg path {
  fill: none;
  stroke: var(--good);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Voice chips pulse in once .play lands. */
.still.play .sk1 { animation: skrise 0.45s 0.05s both; }
.still.play .sk2 { animation: skrise 0.45s 0.18s both; }
.still.play .sk3 { animation: skrise 0.45s 0.32s both; }
.still.play .sk4 { animation: skrise 0.45s 0.48s both; }
.still.play .sk5 { animation: skpop 0.42s 0.7s both; }
.still.play .sk6 { animation: skpop 0.42s 0.9s both; }
.still.play .sk7 { animation: skstamp 0.5s 1.1s both; }

@keyframes skrise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes skpop {
  from { opacity: 0; transform: scale(0.72); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes skstamp {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Mini week in the booking still. */
.skweek {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.skweek__day {
  background: rgba(244, 240, 230, 0.045);
  border-radius: 8px;
  padding: 6px 4px 8px;
  min-height: 92px;
  text-align: center;
}
.skweek__day b {
  display: block;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  margin-bottom: 5px;
}
.skweek__day--on { background: rgba(179, 162, 142, 0.12); }
.skblk {
  display: block;
  border-radius: 5px;
  margin: 0 1px 4px;
  height: 18px;
  background: rgba(244, 240, 230, 0.13);
}
.skblk--tall { height: 30px; }
.skblk--new {
  height: auto;
  background: var(--accent);
  color: var(--chalk);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
  padding: 5px 2px;
}

/* Follow-up / archive rows. */
.skrow {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.skrow__who { font-weight: 620; }
.skrow__meta {
  margin-left: auto;
  color: var(--chalk-faint);
  font-size: 12px;
  text-align: right;
}
.skpill {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 99px;
  padding: 2px 8px;
}
.skpill--ok {
  color: var(--good);
  border: 1.5px solid var(--good);
}
.skpill--keep {
  color: var(--accent-light);
  border: 1.5px solid var(--accent-light);
}
.skrow--keep {
  border: 1px dashed rgba(179, 162, 142, 0.45);
  background: transparent;
}
.skrow--dim { opacity: 0.45; }

/* Quiet hours still: night, hold, morning. */
.skclock {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 10px;
  padding: 9px 11px;
}
.skclock b { display: block; font-size: 14.5px; }
.skclock span { font-size: 12px; color: var(--chalk-faint); }
.sksky { width: 24px; height: 24px; flex: none; overflow: visible; }
.sksky path {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.skclock--day .sksky path { stroke: var(--good); }
.skhold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--chalk-faint);
  padding: 0 2px;
}
.skhold__bar {
  flex: 1;
  height: 5px;
  border-radius: 99px;
  background: rgba(244, 240, 230, 0.12);
  overflow: hidden;
}
.skhold__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent-light);
  border-radius: 99px;
}
.still.play .skhold__fill { animation: skfill 1.4s 0.35s ease-in-out both; }
@keyframes skfill {
  from { width: 0; }
  to { width: 100%; }
}

/* Quote still: lines, then a job chip. */
.skq {
  background: rgba(244, 240, 230, 0.05);
  border-radius: 10px;
  padding: 4px 12px 8px;
}
.skq__line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--chalk-dim);
  padding: 7px 0;
  border-bottom: 1px dashed rgba(244, 240, 230, 0.1);
}
.skq__line b { color: var(--chalk); font-variant-numeric: tabular-nums; }
.skq__total {
  display: flex;
  justify-content: space-between;
  padding: 8px 0 2px;
  font-weight: 700;
}

/* Numbers still. */
.skstats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.skstat {
  background: rgba(244, 240, 230, 0.05);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.skstat b {
  display: block;
  font-size: 18px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.skstat span {
  display: block;
  font-size: 11px;
  color: var(--chalk-faint);
  margin-top: 2px;
}
.skbars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  height: 92px;
  margin-top: 4px;
}
.skbar { display: flex; flex-direction: column; height: 100%; }
.skbar__col { flex: 1; display: flex; align-items: flex-end; min-height: 0; }
.skbar__col i {
  display: block;
  width: 100%;
  height: var(--h, 50%);
  border-radius: 6px 6px 0 0;
  background: var(--accent);
}
.skbar:first-child .skbar__col i { background: var(--good); }
.still.play .skbar__col i { animation: skgrow 0.7s 0.25s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes skgrow {
  from { height: 0; }
  to { height: var(--h); }
}
.skbar__lab {
  flex: none;
  padding-top: 5px;
  font-size: 10.5px;
  color: var(--chalk-faint);
  text-align: center;
}

/* Rain still: outdoor block leaves Tuesday, lands on the dock. */
.skrain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.skrain__day {
  background: rgba(244, 240, 230, 0.05);
  border-radius: 9px;
  padding: 8px 5px 10px;
  min-height: 88px;
  text-align: center;
}
.skrain__day b {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  margin-bottom: 4px;
}
.skrain__wx {
  font-family: var(--hand);
  font-size: 15px;
  color: var(--accent-light);
  display: block;
  margin-bottom: 6px;
}
.skrain__day--wet { background: rgba(142, 163, 179, 0.16); }
.skrain__ghost {
  display: block;
  border-radius: 6px;
  padding: 5px 3px;
  font-size: 10.5px;
  font-weight: 700;
  background: var(--accent);
  color: var(--chalk);
  opacity: 0.28;
}
.skdock {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed rgba(179, 162, 142, 0.45);
  border-radius: 9px;
  padding: 8px 11px;
  font-size: 12.5px;
  color: var(--chalk-faint);
}
.skdock__lab {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.skdock__job {
  background: var(--accent);
  color: var(--chalk);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  padding: 5px 8px;
}

/* Routines still. */
.skrtn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
}
.skrtn__face { width: 48px; height: 48px; flex: none; }
.skrtn__face circle {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 1.8;
}
.skrtn__face path {
  fill: none;
  stroke: var(--chalk);
  stroke-width: 1.8;
  stroke-linecap: round;
  transform-origin: 12px 12px;
}
.still.play .skrtn__face .skhand { animation: skspin 1.6s 0.2s ease-in-out both; }
@keyframes skspin {
  from { transform: rotate(-80deg); }
  to { transform: rotate(0deg); }
}
.skrtn__when {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-faint);
}
.skrtn__ask {
  font-family: var(--hand);
  font-size: 18px;
  line-height: 1.2;
  color: var(--accent-light);
}

/* Ask from a record. */
.skrec {
  border: 1px solid rgba(244, 240, 230, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(244, 240, 230, 0.04);
}
.skrec__kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-light);
}
.skrec__name { font-weight: 650; font-size: 14.5px; margin-top: 2px; }
.skrec__meta { font-size: 12.5px; color: var(--chalk-faint); }
.skrec__ask {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(244, 240, 230, 0.14);
  font-family: var(--hand);
  font-size: 17px;
  color: var(--accent-light);
  line-height: 1.25;
}

/* API still. */
.skapi {
  display: grid;
  gap: 8px;
}
.skapi__row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(244, 240, 230, 0.05);
  border-radius: 10px;
  padding: 10px 12px;
}
.skapi__row svg {
  width: 36px;
  height: 20px;
  flex: none;
  overflow: visible;
}
.skapi__row svg circle,
.skapi__row svg path {
  fill: none;
  stroke: var(--accent-light);
  stroke-width: 2;
  stroke-linecap: round;
}
.skapi__row b { display: block; font-size: 14px; }
.skapi__row span { display: block; font-size: 12px; color: var(--chalk-faint); }

/* ------------------------------------------------ honesty + price strip */
.honest {
  padding: clamp(56px, 9vh, 100px) clamp(18px, 4vw, 44px);
}
.honest__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.honest__inner h2 { margin-bottom: 14px; }
.honest__inner p {
  color: var(--chalk-dim);
  font-size: 17.5px;
  max-width: 58ch;
  margin: 0 auto 14px;
}
.honest__price {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.honest__chip {
  border: 1.6px dashed rgba(244, 240, 230, 0.3);
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 160px;
  background: rgba(244, 240, 230, 0.03);
}
.honest__chip--hot {
  border-style: solid;
  border-color: rgba(244, 240, 230, 0.5);
  background: rgba(244, 240, 230, 0.05);
}
.honest__chip b { display: block; font-size: 22px; }
.honest__chip span { font-size: 13px; color: var(--chalk-dim); }
.honest__more {
  margin-top: 22px;
  font-family: var(--hand);
  font-size: 22px;
}
.honest__more a {
  color: var(--accent-light);
  text-decoration: none;
  border-bottom: 1px solid rgba(179, 162, 142, 0.45);
}
.honest__more a:hover { border-bottom-color: var(--accent-light); }

.rest {
  padding: clamp(56px, 9vh, 96px) clamp(18px, 4vw, 44px);
  text-align: center;
}
.rest h2 { margin-bottom: 12px; }
.rest p {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 52ch;
  margin: 0 auto 18px;
}
.rest a.inline { color: var(--accent); }

@media (max-width: 960px) {
  .still { max-width: 460px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .still.play .sk1,
  .still.play .sk2,
  .still.play .sk3,
  .still.play .sk4,
  .still.play .sk5,
  .still.play .sk6,
  .still.play .sk7,
  .still.play .skhold__fill,
  .still.play .skbar__col i,
  .still.play .skrtn__face .skhand {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .still.play .skhold__fill { width: 100%; }
  .still.play .skbar__col i { height: var(--h); }
  .skilljump a { transition: none; }
}