/* What I build with AI: benefit, workflow, then evidence.
   Existing anime.js scene IDs are preserved. */
.ai {
  position: relative; z-index: 6; /* Above the hero photo layer. */
  padding: clamp(72px, 8vw, 116px) 0 clamp(56px, 7vw, 96px);
  background: var(--paper);
  scroll-margin-top: 70px;
}
.ai .sec-head { margin-bottom: 32px; }
.ai .sec-title { max-width: 19ch; }
.ai .sec-intro { max-width: 60ch; }
.aimap-nav {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 40px;
}
.aimap-nav a {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 10px 15px;
  color: var(--ink); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; font-weight: 600;
  transition: background var(--dur-feedback) ease, border-color var(--dur-feedback) ease;
}
.aimap-nav a span { color: var(--green-deep); font-family: var(--font-mono); font-size: 10px; }
.aimap-nav a:hover { background: var(--green-ghost); border-color: var(--green-deep); }
.ai a:focus-visible, .ai summary:focus-visible {
  outline: 2px solid var(--green-deep); outline-offset: 5px;
}
.aimap-row {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 30px clamp(32px, 5vw, 76px);
  padding: clamp(36px, 5vw, 60px) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.aimap-text { min-width: 0; }
.aimap-text .num { color: var(--green-deep); font-size: 11px; font-weight: 600; }
.aimap-text h3 {
  font-size: clamp(25px, 2.6vw, 36px); line-height: 1.08;
  letter-spacing: -.035em; margin: 12px 0 10px;
  max-width: 20ch; text-wrap: balance;
}
.aimap-benefit { color: var(--ink-soft); font-size: 16px; line-height: 1.5; margin: 0 0 22px; }
.aimap-relief {
  border-left: 3px solid var(--green); padding: 0 0 0 15px;
  font-size: 17px; line-height: 1.5; color: var(--ink); margin: 0 0 22px; text-wrap: pretty;
}
.aimap-relief > span { display: block; font-size: 10px; color: var(--green-deep); margin-bottom: 6px; }
.aimap-io { display: grid; gap: 12px; margin: 0; }
.aimap-io > div { display: grid; grid-template-columns: 75px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.aimap-io dt { color: var(--green-deep); font-size: 10px; font-weight: 600; }
.aimap-io dd { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.aimap-io dd b { color: var(--ink); font-weight: 600; }
.aimap-method { margin-top: 14px; }
.aimap-method summary, .aimap-more summary {
  width: fit-content; min-height: 44px; padding: 12px 0;
  color: var(--green-deep); font-size: 13px; font-weight: 600; cursor: pointer;
}
.aimap-method p { color: var(--ink-soft); font-size: 14px; line-height: 1.6; margin: 0 0 8px; max-width: 48ch; }
.aimap-viz {
  min-width: 0; width: 100%; margin: 0; align-self: center;
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px -24px rgba(15, 43, 29, .3);
}
.aimap-viz-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 17px 22px; border-bottom: 1px solid var(--line);
}
.aimap-viz-head .mono { color: var(--green-deep); font-size: 10px; }
.aimap-example { color: var(--ink-soft); font-size: 11px; }
.aimap-scene { position: relative; aspect-ratio: 320 / 150; margin: 10px 12px 0; }
.aimap-scene .fp-mech { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; }
.aimap-scene svg.fp-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.aimap-flow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line); background: var(--green-ghost);
}
.aimap-flow span {
  position: relative; min-width: 0; padding: 15px 8px; text-align: center;
  font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.4;
}
.aimap-flow span + span { border-left: 1px solid var(--line); }
/* shared scene styling (all five) */


.aimap-evidence { grid-column: 1 / -1; min-width: 0; border-top: 1px solid var(--line); padding-top: 20px; }
.aimap-proof-h { margin: 0 0 12px; font-size: 10px; color: var(--green-deep); }
.aimap-proof {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px; list-style: none; margin: 0; padding: 0;
}
.aimap-proof li { min-width: 0; }
.aimap-proof li > a, .aimap-proof li > span {
  height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px; align-content: start;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px;
  color: inherit; background: #fff; text-decoration: none;
}
.aimap-proof li > a { transition: border-color var(--dur-feedback) ease, background var(--dur-feedback) ease; }
.aimap-proof li > a:hover { border-color: var(--green-deep); background: var(--green-ghost); }
.aimap-proof b { grid-column: 1; grid-row: 1; font-size: 16px; line-height: 1.3; font-weight: 600; }
.aimap-proof b + span { grid-column: 1; grid-row: 2; font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin-top: 5px; max-width: 56ch; }
.aimap-proof .tag {
  grid-column: 2; grid-row: 1; align-self: start; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; font-style: normal; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1.5; padding: 3px 7px; border-radius: 5px;
  background: var(--green-ghost); color: var(--green-deep);
}
.aimap-proof .tag.is-live { background: var(--green-deep); color: #fff; }
.aimap-proof .tag.is-personal { background: var(--paper); color: var(--ink-soft); }
.aimap-proof .tag.is-page { background: var(--ink); color: var(--on-dark); }
.aimap-more { margin-top: 4px; }
.aimap-more summary { list-style: none; display: flex; align-items: center; gap: 10px; }
.aimap-more summary::-webkit-details-marker { display: none; }
.aimap-more summary > span { font-size: 20px; font-weight: 400; transition: transform var(--dur-fast) ease; }
.aimap-more[open] summary > span { transform: rotate(45deg); }
.safe {
  margin-top: 36px; padding: 24px 28px; border-radius: 12px;
  background: var(--green-ghost); display: grid;
  grid-template-columns: 160px minmax(0, 1fr); gap: 20px;
}
.safe-h { color: var(--green-deep); font-size: 11px; font-weight: 600; padding-top: 2px; }
.safe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; }
.safe li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; line-height: 1.5; }
.safe li::before { content: ""; width: 5px; height: 5px; background: var(--green-deep); border-radius: 50%; flex: none; align-self: center; }
@media (max-width: 900px) {
  .aimap-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .aimap-text h3 { max-width: 28ch; }
  .aimap-viz { max-width: 680px; }
  .aimap-io > div { grid-template-columns: 75px minmax(0, 1fr); gap: 14px; }
  .aimap-example { display: none; }
}
@media (max-width: 680px) {
  .ai { scroll-margin-top: 64px; }
  .ai .sec-title { max-width: 19ch; }
  .aimap-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 28px; }
  .aimap-nav a { padding: 10px 12px; font-size: 12px; }
  .aimap-row { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 32px 0; scroll-margin-top: 82px; }
  .aimap-text h3 { max-width: 24ch; font-size: 28px; }
  .aimap-benefit { margin-bottom: 18px; }
  .aimap-relief { font-size: 16px; margin-bottom: 18px; }
  .aimap-io > div { grid-template-columns: 66px minmax(0, 1fr); gap: 12px; }
  .aimap-io dd { font-size: 15px; }
  .aimap-viz { align-self: stretch; }
  .aimap-viz-head { padding: 14px 16px; }
  .aimap-example { display: block; font-size: 10px; }
  .aimap-scene { aspect-ratio: 320 / 150; margin: 8px 8px 0; }
  .aimap-flow span { padding: 12px 7px; font-size: 11px; }
  .aimap-proof { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .aimap-proof li > a, .aimap-proof li > span { padding: 15px; }
  .aimap-proof b { font-size: 15px; }
  .aimap-proof b + span { font-size: 13px; }
  .safe { padding: 22px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .safe ul { display: grid; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ai *, .ai *::before, .ai *::after { transition: none !important; scroll-behavior: auto; }
}

/* Concrete, readable project previews. These are illustrations, not screenshots. */
.aimap-proof { gap: 20px; }
.aimap-project { height: 100%; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.project-visual { padding: 18px 22px 22px; background: #edf3ef; min-height: 238px; display: flex; flex-direction: column; gap: 18px; border-bottom: 1px solid var(--line); }
.project-preview-label { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; color: #496356; }
.project-preview-label > span:first-child { font-family: var(--font-mono); letter-spacing: .08em; }
.project-info { padding: 22px; }
.project-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.project-title h4 { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink-soft); }
.project-title .tag { flex: none; }
.project-outcome { margin: 10px 0 8px; font-size: clamp(20px, 2vw, 25px); line-height: 1.2; font-weight: 600; letter-spacing: -.035em; text-wrap: balance; }
.project-caption { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.project-input { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 14px 0; margin-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.project-input > span { font-family: var(--font-mono); font-size: 9px; line-height: 1.8; color: var(--green-deep); }
.project-actions { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.project-actions details { flex: 1; min-width: 0; }
.project-actions summary { padding: 12px 0; min-height: 44px; font-size: 12px; cursor: pointer; color: var(--ink-soft); }
.project-actions details p { margin: 0 0 8px; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.project-link { min-height: 44px; display: inline-flex; align-items: center; color: var(--green-deep); font-size: 12px; font-weight: 600; text-underline-offset: 4px; flex: none; }
.demo-chat { display: flex; flex-direction: column; gap: 12px; margin: auto 0; font-size: 14px; line-height: 1.45; }
.demo-question { background: #d1e8dc; color: #1d513b; padding: 11px 15px; border-radius: 14px 14px 3px 14px; align-self: flex-end; max-width: 88%; }
.demo-answer { background: white; padding: 14px 17px; border: 1px solid #dbe4de; border-radius: 3px 14px 14px; max-width: 92%; }
.demo-answer small { display: block; margin-top: 10px; color: #247353; font-size: 11px; }
.demo-panel { background: white; border: 1px solid #dbe4de; border-radius: 10px; padding: 16px; margin: auto 0; }
.demo-panel > strong { display: block; margin-bottom: 9px; font-size: 13px; }
.demo-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #e8ede9; font-size: 12px; }
.demo-line em { font-style: normal; font-size: 10px; color: #226b4c; background: #edf6f0; padding: 3px 6px; border-radius: 4px; flex: none; }
.demo-carousel { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 9px; align-items: center; margin: auto 0; }
.demo-slide { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; aspect-ratio: 1; padding: 14px; border-radius: 5px; background: #164832; color: #fff; }
.demo-slide:nth-child(2) { background: #cae7b2; color: #183a29; transform: rotate(3deg); }
.demo-slide small { font-size: 9px; font-family: var(--font-mono); }
.demo-slide strong { font-size: clamp(17px, 1.8vw, 25px); line-height: 1.05; letter-spacing: -.04em; }
.demo-slide i { font-size: 9px; font-style: normal; }
.demo-carousel > div { display: grid; gap: 14px; padding-left: 5px; }
.demo-carousel em { font-size: 10px; font-style: normal; color: #246047; }
.demo-video { display: grid; grid-template-columns: 104px 1fr; gap: 24px; margin: auto 0; align-items: center; }
.demo-phone { height: 174px; background: #173d31; color: white; border-radius: 12px; border: 5px solid #21382d; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 7px; }
.demo-phone > span { font-size: 24px; color: #bce19d; }
.demo-phone strong { font-size: 15px; line-height: 1.1; }
.demo-phone small { font-size: 8px; color: #d7e6d9; }
.demo-tracks { display: grid; gap: 13px; }
.demo-tracks > span { display: block; font-size: 9px; color: #506659; font-family: var(--font-mono); }
.demo-tracks i { display: block; height: 16px; margin-top: 5px; border-radius: 3px; background: repeating-linear-gradient(90deg,#a3cbb7 0 22%,transparent 22% 24%); }
.demo-tracks > span:nth-child(3) i { background: repeating-linear-gradient(90deg,#bcc9b1 0 31%,transparent 31% 34%); }
.demo-tracks > em { font-size: 11px; font-style: normal; color: #226b4c; }
.waveform { display: block; height: 28px; margin-top: 5px; background: repeating-linear-gradient(90deg,#388365 0 3px,transparent 3px 7px); clip-path: polygon(0 40%,10% 15%,20% 35%,30% 0,40% 25%,50% 5%,60% 35%,70% 10%,80% 25%,90% 0,100% 40%,100% 60%,90% 100%,80% 75%,70% 90%,60% 65%,50% 95%,40% 75%,30% 100%,20% 65%,10% 85%,0 60%); }
.demo-stages { margin: auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.demo-stages > span { background: white; border: 1px solid #dbe4de; border-radius: 8px; display: flex; align-items: center; gap: 12px; padding: 16px; font-size: 13px; }
.demo-stages i { color: #277354; font-size: 10px; font-style: normal; font-family: var(--font-mono); }
.demo-stages > span:nth-child(3) { background: #f9f1dc; border-color: #e7dabb; }
.demo-memo { display: grid; grid-template-columns: .7fr 1fr; gap: 24px; align-items: center; margin: auto 0; }
.demo-note { padding: 18px; background: #fff9df; border: 1px solid #e8dfb5; border-radius: 5px; transform: rotate(2deg); }
.demo-note small { font-size: 8px; color: #766c48; }
.demo-note strong { display: block; font-size: 18px; line-height: 1.2; margin: 15px 0; }
.demo-note em { display: inline-block; font-size: 9px; font-style: normal; margin-right: 8px; color: #675d37; }
.demo-ableton { background: #23382f; color: #f1f6ee; border-radius: 8px; padding: 16px; margin: auto 0; }
.demo-tempo { font-size: 23px; font-family: var(--font-mono); }
.demo-tempo small { font-size: 8px; color: #b8ccbf; }
.demo-ableton .demo-line { border-color: #425348; }
.demo-ableton .demo-line em { background: #8db993; color: #20472b; letter-spacing: 5px; }
.demo-ableton > small { font-size: 10px; color: #c8d8cd; }
.demo-moodboard { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: auto 0; }
.demo-moodboard span { aspect-ratio: 1; background: #b6c6aa; border-radius: 4px; }
.demo-moodboard span:nth-child(3n) { background: radial-gradient(ellipse at 70% 30%,#e7c6a3 0 30%,#755949 31% 54%,#d8b79d 55%); }
.demo-moodboard span:nth-child(3n + 1) { background: repeating-linear-gradient(120deg,#345649 0 12px,#8ca995 12px 23px); }
.demo-moodboard span:nth-child(4n) { background: #e3d9ba; border-radius: 40% 40% 4px 4px; }
@media (max-width: 680px) {
  .aimap-proof { gap: 16px; }
  .project-visual { padding: 16px; min-height: 220px; }
  .project-info { padding: 18px; }
  .project-outcome { font-size: 23px; }
  .project-title h4 { font-size: 13px; }
  .demo-carousel { grid-template-columns: 1fr 1fr; }
  .demo-carousel > div { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 5px 0 0; gap: 8px; }
  .demo-slide { aspect-ratio: 1.2; }
  .demo-slide strong { font-size: 24px; }
  .demo-video { gap: 18px; }
  .demo-stages > span { padding: 13px 10px; gap: 8px; font-size: 12px; }
  .demo-chat { font-size: 13px; }
  .demo-line { gap: 8px; font-size: 11px; }
}