/* AI practice page only. Ported from the Infinity AI services page into the infigroup system:
   infigroup tokens only, green-d for accents on light plates, green-l on dark ones. */

/* Credentials strip: the ledger from the About page, with sans terms for longer labels */
.ai-cred dt{font:650 18px/1.3 var(--sans);color:var(--ink);margin-bottom:6px}

/* Service picker */
.ai-picker{display:grid;grid-template-columns:330px 1fr;background:var(--paper);border:1px solid var(--line);border-top:4px double var(--green)}
.ai-picker-list{display:flex;flex-direction:column;border-right:1px solid var(--line)}
.ai-picker-list button{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:24px 26px;border-bottom:1px solid var(--line)}
.ai-picker-list button:last-child{border-bottom:0}
.ai-picker-list button:hover{background:var(--plate)}
.ai-picker-list button[aria-selected="true"]{background:var(--ink)}
.ai-picker-list button[aria-selected="true"] .pk-name{color:#fff}
.ai-picker-list button[aria-selected="true"] .pk-line{color:var(--on-ink-2)}
.ai-picker-list button:focus-visible{outline:2px solid var(--green);outline-offset:-4px}
.pk-name{display:block;font:650 18px/1.25 var(--sans);color:var(--ink)}
.pk-line{display:block;font-size:14.5px;color:var(--muted);margin-top:6px}
.ai-panels{padding:44px 48px}
.ai-panel + .ai-panel{margin-top:48px;padding-top:48px;border-top:1px solid var(--line)}
.ai-picker.js .ai-panel{display:none}
.ai-picker.js .ai-panel.on{display:block}
.ai-picker.js .ai-panel + .ai-panel{margin-top:0;padding-top:0;border-top:0}
.ai-panel:focus-visible{outline-offset:8px}
.ai-panel h3{font:600 clamp(26px,2.6vw,34px)/1.15 var(--serif)}
.ai-panel h4{font:600 14.5px/1.3 var(--sans);color:var(--ink);margin:0 0 10px;letter-spacing:.01em}
.ai-promise{font-size:19px;color:var(--text);margin:14px 0 8px;max-width:52ch}
.ai-for{color:var(--muted);font-size:15.5px;font-style:italic;margin-bottom:30px}
.ai-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:40px}
.ai-cols ul{margin:0;padding-left:18px}
.ai-cols li{margin-bottom:10px;font-size:16px}
.ai-cols li::marker{color:var(--green)}
.ai-cols p{font-size:16px}

/* In development */
.ai-svc{padding-bottom:72px}
.ai-planned{padding-top:0}
.ai-planned-in{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;border-top:1px solid var(--ink);padding-top:44px}
.ai-planned-in header p{color:var(--muted);margin-top:14px}
.ai-planned-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.ai-planned-list dt{font:650 17px/1.3 var(--sans);color:var(--ink)}
.ai-tag{display:table;margin:8px 0 2px;font:500 12px/1 var(--sans);color:var(--green-d);
  border:1px solid var(--green);padding:3px 7px;border-radius:2px;white-space:nowrap}
.ai-planned-list dd{margin:6px 0 0;font-size:15px;color:var(--muted)}

/* Method: six steps on the ink plate */
.ai-method .steps{grid-template-columns:repeat(6,1fr)}
.ai-method .steps li{padding:0 20px 0 0}
.ai-method .steps li + li{padding-left:20px;border-left:1px solid rgba(255,255,255,.16)}
.ai-method .num{font-size:34px;margin-bottom:16px}
.ai-method .steps h3{font-size:19px}
.ai-method .steps p{font-size:15px}

/* Commitments */
.ai-cov{margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px 48px}
.ai-cov div{border-top:1px solid var(--ink);padding-top:18px}
.ai-cov dt{font:650 18px/1.3 var(--sans);color:var(--ink);margin-bottom:8px}
.ai-cov dd{margin:0;color:#3d4556;font-size:16px}
.ai-commit h2{max-width:20ch;margin-bottom:48px}

/* Engagement terms */
.ai-terms{width:100%;border-collapse:collapse;background:var(--paper);border-top:4px double var(--green);border-bottom:1px solid var(--ink)}
.ai-terms th,.ai-terms td{text-align:left;padding:20px 22px;border-bottom:1px solid var(--line);vertical-align:top}
.ai-terms thead th{font:600 13.5px var(--sans);color:var(--muted);padding-top:14px;padding-bottom:14px}
.ai-terms tbody th{font:650 17.5px/1.3 var(--sans);color:var(--ink);width:32%}
.ai-terms td:nth-child(2){color:var(--green-d);font-weight:600;width:16%}
.ai-terms tbody tr:last-child th,.ai-terms tbody tr:last-child td{border-bottom:0}

/* Lead and FAQ share a two-column layout */
.ai-two{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px}
.ai-lead{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ai-lead .ai-two > div{max-width:var(--measure);font-size:18px}
.ai-lead-name{font:650 20px/1.3 var(--sans);color:var(--ink)}
.ai-faq details{border-top:1px solid var(--line)}
.ai-faq details:last-child{border-bottom:1px solid var(--line)}
.ai-faq summary{cursor:pointer;list-style:none;font:650 18px/1.35 var(--sans);color:var(--ink);padding:20px 40px 20px 0;position:relative}
.ai-faq summary::-webkit-details-marker{display:none}
.ai-faq summary::after{content:"+";position:absolute;right:6px;top:15px;font:300 28px var(--sans);color:var(--green-d)}
.ai-faq details[open] summary::after{content:"\2212"}
.ai-faq details p{color:#3d4556;max-width:var(--measure);padding-bottom:12px}

/* Responsive */
@media (max-width:1040px){
  .ai-picker{grid-template-columns:1fr}
  .ai-picker-list{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .ai-picker-list button{flex:0 0 220px;border-bottom:0;border-right:1px solid var(--line)}
  .ai-picker-list button:last-child{border-right:0}
  .ai-panels{padding:32px 28px}
  .ai-cols,.ai-planned-in,.ai-two{grid-template-columns:1fr;gap:28px}
  .ai-method .steps{grid-template-columns:repeat(3,1fr);gap:40px 0}
  .ai-method .steps li:nth-child(3){padding-left:20px;border-left:1px solid rgba(255,255,255,.16)}
  .ai-method .steps li:nth-child(4){padding-left:0;border-left:0}
  .ai-cov{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .ai-picker-list button{flex-basis:200px;padding:20px}
  .ai-panels{padding:28px 20px}
  .ai-planned-list,.ai-cov{grid-template-columns:1fr}
  .ai-method .steps{grid-template-columns:1fr;gap:32px}
  .ai-method .steps li,.ai-method .steps li + li,.ai-method .steps li:nth-child(3){padding:0;border-left:0}
  .ai-terms thead{display:none}
  .ai-terms tr{display:block;padding:16px 0;border-bottom:1px solid var(--line)}
  .ai-terms tbody tr:last-child{border-bottom:0}
  .ai-terms th,.ai-terms td{display:block;padding:4px 16px;border:0;width:auto !important}
}