/* ============================================================
   AI Media — v2 content sections
   Restores old-site service substance into the new design system.
   Reuses the same tokens, radii, shadows and tints as styles.css.
   ============================================================ */

/* ---------- warm-transfer callout ---------- */
.handoff{
  background:linear-gradient(135deg,var(--tint-mint),var(--white) 72%);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,46px);
  display:grid;grid-template-columns:auto 1fr;gap:30px;align-items:center;
}
.handoff .hf-ic{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--line);color:var(--ink);flex:none;box-shadow:var(--shadow-sm);}
.handoff .hf-ic svg{width:30px;height:30px;}
.handoff .eyebrow{margin-block-end:12px;}
.handoff h2{font-size:clamp(23px,3vw,34px);font-weight:600;}
.handoff p{color:var(--ink-2);font-size:17px;line-height:1.62;margin-block-start:14px;max-width:66ch;}
.handoff .hf-triggers{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:22px;}
.handoff .hf-triggers .lbl{font-family:var(--font-display);font-size:13px;font-weight:500;
  color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;}
.handoff .hf-triggers .t{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-size:13.5px;font-weight:500;color:var(--ink-2);background:var(--white);border:1px solid var(--line);
  padding:8px 14px;border-radius:var(--radius-pill);}
.handoff .hf-triggers .t::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad-iri);}
@media(max-width:680px){.handoff{grid-template-columns:1fr;gap:22px;}}

/* ---------- 3-way comparison table (Mia vs IVR vs Human) ---------- */
.cmp-outer{overflow-x:auto;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--line);}
.cmp-table{width:100%;min-width:660px;border-collapse:collapse;background:var(--white);}

/* col backgrounds via nth-child */
.cmp-table thead th:nth-child(1){background:var(--paper);width:28%;}
.cmp-table thead th:nth-child(2){background:var(--paper-2);width:24%;}
.cmp-table thead th:nth-child(3){background:var(--tint-lav);width:24%;
  border-block-start:3px solid var(--iri-lav);
  border-inline:1px solid rgba(205,180,246,.55);}
.cmp-table thead th:nth-child(4){background:var(--paper-2);width:24%;}

.cmp-table tbody td:nth-child(1){background:var(--paper);}
.cmp-table tbody td:nth-child(2){background:var(--white);}
.cmp-table tbody td:nth-child(3){background:var(--tint-lav);
  border-inline:1px solid rgba(205,180,246,.55);}
.cmp-table tbody td:nth-child(4){background:var(--white);}
.cmp-table tbody tr:last-child td:nth-child(3){
  border-block-end:1px solid rgba(205,180,246,.55);}

/* header cells */
.cmp-table thead th{
  padding:28px 20px 24px;text-align:center;vertical-align:bottom;
  border-block-end:1px solid var(--line);}
.cmp-table thead th:nth-child(1){text-align:start;padding-inline-start:26px;border-block-end:1px solid var(--line-2);}

.cmp-svc{display:flex;flex-direction:column;align-items:center;gap:5px;}
.cmp-svc-ico{width:48px;height:48px;border-radius:14px;background:var(--white);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);margin-block-end:8px;}
.cmp-svc-ico svg{width:22px;height:22px;}
.cmp-mia-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(205,180,246,.6);box-shadow:var(--shadow-sm);margin-block-end:8px;}
.cmp-svc-name{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);}
.cmp-svc-desc{font-size:13px;color:var(--ink-3);}
.cmp-best-badge{display:inline-block;font-family:var(--font-display);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);
  background:var(--grad-iri-soft);border:1px solid rgba(205,180,246,.6);
  padding:5px 13px;border-radius:var(--radius-pill);margin-block-end:14px;}

/* data cells */
.cmp-table tbody td{
  padding:16px 20px;border-block-end:1px solid var(--line-2);vertical-align:middle;text-align:center;}
.cmp-table tbody td:nth-child(1){
  text-align:start;padding-inline-start:26px;
  font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--ink);
  border-block-end:1px solid var(--line-2);}
.cmp-table tbody tr:last-child td{border-block-end:none;}

/* yes / no / partial indicators */
.cmp-yes,.cmp-no,.cmp-par{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;line-height:1.35;padding:6px 11px;border-radius:10px;text-wrap:pretty;}
.cmp-yes{color:oklch(32% 0.13 148);background:oklch(95% 0.05 148);}
.cmp-no{color:var(--ink-3);background:var(--paper-2);}
.cmp-par{color:oklch(40% 0.1 55);background:oklch(96% 0.06 78);}
.cmp-yes svg,.cmp-no svg,.cmp-par svg{width:13px;height:13px;flex:none;stroke-width:2.5;}

/* section divider rows */
.cmp-table tbody tr.cmp-divider td{
  padding-block:10px;background:var(--paper-2);
  font-family:var(--font-display);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);
  border-block:1px solid var(--line-2);}
.cmp-table tbody tr.cmp-divider td:nth-child(3){background:oklch(93% 0.06 290 / .25);}

@media(max-width:760px){
  .cmp-outer{border-radius:var(--radius);}
  .cmp-table thead th,.cmp-table tbody td{padding:13px 13px;}
  .cmp-table thead th:nth-child(1),.cmp-table tbody td:nth-child(1){padding-inline-start:16px;}
  .cmp-table{min-width:580px;}
  .cmp-svc-ico{width:40px;height:40px;border-radius:11px;}
  .cmp-mia-avatar{width:44px;height:44px;}
  .cmp-svc-name{font-size:15px;}
}

/* ---------- benefits ---------- */
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.ben{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;}
.ben:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2);}
.ben .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-block-end:17px;color:var(--ink);}
.ben:nth-child(1) .ic{background:var(--tint-lav);}
.ben:nth-child(2) .ic{background:var(--tint-sky);}
.ben:nth-child(3) .ic{background:var(--tint-mint);}
.ben:nth-child(4) .ic{background:var(--tint-pink);}
.ben:nth-child(5) .ic{background:var(--tint-cream);}
.ben:nth-child(6) .ic{background:var(--tint-lav);}
.ben .ic svg{width:24px;height:24px;}
.ben h3{font-size:18.5px;font-weight:600;margin-block-end:8px;}
.ben p{color:var(--ink-2);font-size:15px;line-height:1.55;}
@media(max-width:880px){.ben-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ben-grid{grid-template-columns:1fr;}}

/* ---------- capabilities grid ("everything Mia can do") ---------- */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.cap{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px 22px 20px;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;}
.cap:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2);}
.cap .ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-block-end:16px;color:var(--ink);}
.cap .ic svg{width:24px;height:24px;}
.cap:nth-child(8n+1) .ic{background:var(--tint-lav);}
.cap:nth-child(8n+2) .ic{background:var(--tint-sky);}
.cap:nth-child(8n+3) .ic{background:var(--tint-mint);}
.cap:nth-child(8n+4) .ic{background:var(--tint-pink);}
.cap:nth-child(8n+5) .ic{background:var(--tint-cream);}
.cap:nth-child(8n+6) .ic{background:var(--tint-sky);}
.cap:nth-child(8n+7) .ic{background:var(--tint-mint);}
.cap:nth-child(8n) .ic{background:var(--tint-lav);}
.cap h3{font-size:17px;font-weight:600;line-height:1.25;margin-block-end:7px;}
.cap p{color:var(--ink-2);font-size:14px;line-height:1.5;}
.cap .st{margin-block-start:auto;padding-block-start:16px;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:12.5px;font-weight:500;color:var(--ink-2);}
.cap .st .v{width:18px;height:18px;border-radius:50%;background:var(--grad-iri);display:grid;place-items:center;flex:none;}
.cap .st .v svg{width:11px;height:11px;color:var(--ink);stroke-width:3;}

/* tier-2 ("coming now") variant */
.cap-soon-head{display:flex;align-items:center;gap:16px;margin-block:46px 22px;}
.cap-soon-head .ttl{font-family:var(--font-display);font-size:14px;font-weight:500;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;}
.cap-soon-head .ln{height:1px;flex:1;background:var(--line);}
.cap.soon{background:var(--paper);border-style:dashed;border-color:var(--line-2);}
.cap.soon .ic{background:var(--white);border:1px solid var(--line);color:var(--ink-2);}
.cap.soon h3{color:var(--ink);}
.cap.soon .st{color:var(--ink-3);}
.cap.soon .st .v{background:var(--white);border:1px dashed var(--line-2);}
.cap.soon .st .v::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--grad-iri);}
.cap-grid.soon-grid{grid-template-columns:repeat(5,1fr);}
@media(max-width:980px){.cap-grid,.cap-grid.soon-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.cap-grid,.cap-grid.soon-grid{grid-template-columns:1fr;}}

/* ---------- pilots ("where to start") ---------- */
.pilot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.pilot{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;
  display:flex;flex-direction:column;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;}
.pilot:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2);}
.pilot.feat{background:linear-gradient(160deg,var(--tint-lav),var(--white) 70%);border-color:rgba(205,180,246,.5);}
.pilot .badge{align-self:flex-start;font-family:var(--font-display);font-size:11.5px;font-weight:500;color:var(--ink);
  background:var(--white);border:1px solid var(--line-2);padding:6px 13px;border-radius:var(--radius-pill);margin-block-end:18px;}
.pilot.feat .badge{border-color:rgba(205,180,246,.6);}
.pilot h3{font-size:22px;font-weight:600;margin-block-end:10px;}
.pilot .desc{color:var(--ink-2);font-size:15px;line-height:1.56;}
.pilot .feats{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px;}
.pilot .feats li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-2);line-height:1.45;}
.pilot .feats li svg{width:18px;height:18px;flex:none;margin-block-start:1px;color:var(--ink);}
.pilot .pilot-foot{margin-block-start:auto;padding-block-start:22px;}
.pilot .pmeta{font-size:13px;color:var(--ink-3);font-weight:500;display:flex;align-items:center;gap:8px;
  padding-block-start:20px;margin-block-start:22px;border-block-start:1px solid var(--line);margin-block-end:16px;}
.pilot .pmeta svg{width:15px;height:15px;flex:none;}
.pilot .btn{width:100%;}
@media(max-width:880px){.pilot-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto;}}

/* pilot outcome callout */
.pilot-outcome{display:flex;align-items:center;gap:12px;margin-block:18px 0;padding:14px 16px;
  background:var(--paper-2);border-radius:var(--radius);border:1px solid var(--line);}
.pilot.feat .pilot-outcome{background:rgba(205,180,246,.12);border-color:rgba(205,180,246,.35);}
.po-stat{font-size:18px;font-weight:700;color:var(--ink);white-space:nowrap;font-family:var(--font-display);}
.pilot.feat .po-stat{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink);}
.po-label{font-size:13px;color:var(--ink-2);line-height:1.4;}

/* included-in-every-pilot strip */
.pilot-incl{margin-block-start:36px;padding:28px 32px;background:var(--paper-2);
  border-radius:var(--radius-lg);border:1px solid var(--line);}
.pi-label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-block-end:20px;}
.pi-items{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.pi-item{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;}
.pi-item svg{width:22px;height:22px;color:var(--ink-2);flex:none;}
.pi-item span{font-size:13px;color:var(--ink-2);line-height:1.35;}
@media(max-width:1024px){.pi-items{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.pi-items{grid-template-columns:repeat(2,1fr);}
  .pilot-incl{padding:22px 18px;}}