/* A single, fictional UX example makes the three uses of AI tangible. */
.sober-home #ia .aiv12-intro>p:last-child{
  display:block;
  max-width:43ch;
  color:#465a7b;
  font:500 clamp(16px,1.35vw,19px)/1.5 var(--sans,Arial,sans-serif);
}
.sober-home #ia .aiv138-example{
  margin:-3px 0 24px;
  color:#60718a;
  font:400 13px/1.5 var(--sans,Arial,sans-serif);
}
.sober-home #ia .aiv12-grid{gap:16px}
.sober-home #ia .aiv138-card{
  padding:clamp(22px,2.2vw,28px);
  border:1px solid #d9e3f3;
  background:#fff;
  box-shadow:0 14px 36px rgba(26,49,88,.06);
}
.sober-home #ia .aiv138-card .aiv12-top{margin-bottom:10px}
.sober-home #ia .aiv138-card h3{
  max-width:13ch;
  margin-bottom:10px;
  font-size:clamp(30px,2.5vw,37px);
  line-height:1.04;
}
.sober-home #ia .aiv138-card .aiv12-desc{
  min-height:0;
  max-width:36ch;
  color:#526481;
  line-height:1.5;
}
.sober-home #ia .aiv138-artifact{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:240px;
  margin-top:23px;
  padding:17px;
  border:1px solid #d7e2f0;
  border-radius:17px;
  background:linear-gradient(150deg,#f6f9ff,#eef4fd);
}
.sober-home #ia .aiv138-artifact-label{
  color:#42608e;
  font:700 11px/1.25 var(--sans,Arial,sans-serif);
  letter-spacing:.055em;
  text-transform:uppercase;
}
.sober-home #ia .aiv138-note-stack{display:grid;gap:7px}
.sober-home #ia .aiv138-note-stack span{
  display:block;
  padding:8px 11px;
  border:1px solid #d5deeb;
  border-radius:8px;
  background:#fff;
  color:#354a67;
  font:600 12px/1.2 var(--sans,Arial,sans-serif);
  box-shadow:0 2px 5px rgba(30,51,88,.035);
}
.sober-home #ia .aiv138-note-stack span:nth-child(2){margin-left:16px}
.sober-home #ia .aiv138-note-stack span:nth-child(3){margin-left:8px}
.sober-home #ia .aiv138-outcome{
  display:grid;
  gap:4px;
  margin-top:auto;
  padding:12px 14px;
  border:1px solid #b8caff;
  border-radius:10px;
  background:#e8eeff;
}
.sober-home #ia .aiv138-outcome span{
  color:#3154c1;
  font:700 10px/1.3 var(--sans,Arial,sans-serif);
  letter-spacing:.045em;
  text-transform:uppercase;
}
.sober-home #ia .aiv138-outcome strong{
  color:#21385e;
  font:700 13px/1.28 var(--sans,Arial,sans-serif);
}
.sober-home #ia .aiv138-options{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:1}
.sober-home #ia .aiv138-option{
  min-width:0;
  padding:9px;
  border:1px solid #d5dfec;
  border-radius:10px;
  background:#fff;
}
.sober-home #ia .aiv138-option.is-selected{border:2px solid #3154ef;padding:8px;box-shadow:0 5px 14px rgba(49,84,239,.1)}
.sober-home #ia .aiv138-option>span{
  display:flex;
  justify-content:space-between;
  gap:5px;
  min-height:30px;
  color:#435774;
  font:700 10px/1.2 var(--sans,Arial,sans-serif);
}
.sober-home #ia .aiv138-option>span b{color:#3154ef;font:700 9px/1.2 var(--sans,Arial,sans-serif)}
.sober-home #ia .aiv138-option-screen{display:grid;gap:5px}
.sober-home #ia .aiv138-option-screen i{
  display:block;
  padding:6px 7px;
  border:1px solid #dce5f1;
  border-radius:5px;
  background:#f9fbff;
  color:#5c6e87;
  font:500 9px/1.1 var(--sans,Arial,sans-serif);
}
.sober-home #ia .aiv138-option.is-selected .aiv138-option-screen i:first-child{border-color:#bfceff;background:#ecf1ff;color:#2e4da7}
.sober-home #ia .aiv138-compare .aiv138-outcome{background:#fff}
.sober-home #ia .aiv138-prototype{gap:9px}
.sober-home #ia .aiv138-window{
  overflow:hidden;
  width:min(100%,265px);
  margin:auto;
  border:1px solid #c7d5e9;
  border-radius:11px;
  background:#fff;
  box-shadow:0 9px 20px rgba(28,51,91,.11);
}
.sober-home #ia .aiv138-window-bar{
  display:flex;
  align-items:center;
  gap:4px;
  height:24px;
  padding:0 9px;
  border-bottom:1px solid #dce5f1;
  background:#f3f6fb;
}
.sober-home #ia .aiv138-window-bar>span{width:5px;height:5px;border-radius:50%;background:#b7c5d9}
.sober-home #ia .aiv138-window-bar small{margin-left:auto;color:#62748c;font:600 8px var(--sans,Arial,sans-serif)}
.sober-home #ia .aiv138-window-body{display:grid;gap:6px;padding:12px}
.sober-home #ia .aiv138-window-progress{color:#5874ab;font:700 8px var(--sans,Arial,sans-serif)}
.sober-home #ia .aiv138-window-body>strong{margin:1px 0 3px;color:#1c3559;font:700 13px/1.2 var(--sans,Arial,sans-serif)}
.sober-home #ia .aiv138-choice{
  padding:7px 8px;
  border:1px solid #d4dfef;
  border-radius:5px;
  color:#4d617e;
  font:600 9px/1.15 var(--sans,Arial,sans-serif);
}
.sober-home #ia .aiv138-choice.is-active{border-color:#7f9cff;background:#f0f3ff;color:#2b4bb0}
.sober-home #ia .aiv138-help{display:flex;justify-content:space-between;color:#3e5fa9;font:600 9px/1.2 var(--sans,Arial,sans-serif)}
.sober-home #ia .aiv138-submit{padding:7px;border-radius:5px;background:#3154ef;color:#fff;text-align:center;font:700 9px/1.2 var(--sans,Arial,sans-serif)}
.sober-home #ia .aiv138-takeaway{
  margin:17px 0 0;
  padding-top:13px;
  border-top:1px solid #e2e9f3;
  color:#526481;
  font:500 12px/1.45 var(--sans,Arial,sans-serif);
}
.sober-home #ia .aiv138-takeaway strong{color:#29456d}
@media(min-width:701px) and (max-width:1080px){
  .sober-home #ia .aiv138-card{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);column-gap:24px}
  .sober-home #ia .aiv138-card .aiv12-top,
  .sober-home #ia .aiv138-card h3,
  .sober-home #ia .aiv138-card .aiv12-desc{grid-column:1}
  .sober-home #ia .aiv138-artifact{grid-column:2;grid-row:1/4;align-self:stretch;margin:0}
  .sober-home #ia .aiv138-takeaway{grid-column:1/-1}
}
@media(max-width:700px){
  .sober-home #ia .aiv12-intro>p:last-child{display:block;max-width:34ch;font-size:15px}
  .sober-home #ia .aiv138-example{margin:0 0 18px;font-size:12px}
  .sober-home #ia .aiv138-card{display:flex;padding:20px}
  .sober-home #ia .aiv138-card h3{font-size:32px}
  .sober-home #ia .aiv138-artifact{min-height:224px;margin-top:18px;padding:14px}
  .sober-home #ia .aiv138-takeaway{font-size:11px}
}