/* Info pages (/the-ai, /compliance): the few components site.css doesn't have.
   Everything is prefixed pi- and built from the site.css tokens, so it follows
   the same bands, type and colour rules (green only for bookings). */

/* ── hero extras ── */
.pi-hero-facts{max-width:940px;margin:64px auto 0;text-align:left}
.pi-hero-facts b{font-size:clamp(34px,3.6vw,46px)}
.pi-note{display:flex;align-items:flex-start;gap:12px;max-width:620px;margin:30px auto 0;padding:15px 18px;border-radius:14px;background:var(--bg-2);
  font-size:14.5px;line-height:1.5;color:var(--ink-2);text-align:left}
.pi-note .ico{margin-top:1px;color:var(--ink)}
.pi-note b{color:var(--ink);font-weight:600}
.pi-toc{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:880px;margin:30px auto 0}
.pi-toc a{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:980px;border:1px solid var(--line-2);
  font:500 13px/1 var(--font);color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:border-color .2s,color .2s}
.pi-toc a:hover{border-color:var(--ink);color:var(--ink)}

/* site.css lets .sect.alt .panel (white) win over .panel.ink; keep ink panels ink on grey bands */
.sect.alt .panel.ink{background:var(--ink)}
/* headlines whose italic clause is a full sentence: give it its own line */
.pi-stack em{display:block}

/* ── shared layout ── */
.pi-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.pi-two.mid{align-items:center;gap:56px}
.pi-prose p{font-size:17px;line-height:1.6;color:var(--ink-2);max-width:36em}
.pi-prose p+p{margin-top:16px}
.pi-prose .more{margin-top:26px}
.pi-cap{font-size:12.5px;color:var(--faint);margin-top:16px}
.pi-ic{width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;margin-bottom:24px}
.pi-ic .ico{width:19px;height:19px}
.pi-under{margin-top:28px}

/* ── a call, step by step ── */
.pi-flow{background:var(--card);border-radius:var(--r-tile);overflow:hidden}
.sect:not(.alt) .pi-flow{background:var(--bg-2)}
.pi-flow>li{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(0,1.05fr);gap:10px 28px;align-items:start;padding:30px 36px;border-top:1px solid var(--line)}
.pi-flow>li:first-child{border-top:0}
.pi-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--ink);font:500 13px/1 var(--mono)}
.pi-flow h3{font-size:19px;margin:4px 0 8px}
.pi-flow p{color:var(--ink-2);font-size:15.5px}
.pi-flow .pi-say,.pi-flow .pi-sys{align-self:center}
.pi-say{padding:14px 17px;border-radius:18px 18px 18px 6px;background:var(--bg-2);font-size:15px!important;line-height:1.5;color:var(--ink)!important}
.pi-say small{display:block;font:500 11.5px/1 var(--mono);color:var(--muted);margin-bottom:8px}
.pi-sys{justify-self:start;display:inline-flex;align-items:center;gap:9px;padding:10px 15px;border-radius:14px;border:1px solid var(--line);font-size:13.5px!important;line-height:1.35}
.pi-sys .ico{width:15px;height:15px}
.pi-sys.ok{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-ink)!important}

/* ── a brief or notification, set like a small document ── */
.pi-brief{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.pi-brief-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line);font-weight:600;font-size:15px}
.pi-brief-h>span:last-child{font:400 11.5px/1.3 var(--mono);color:var(--faint);text-align:right}
.pi-brief dl{margin:0;padding:4px 22px 8px}
.pi-brief dl>div{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.45}
.pi-brief dl>div:first-child{border-top:0}
.pi-brief dl>div.gap{border-top:1px solid var(--line-2)}
.pi-brief dt{color:var(--muted)}
.pi-brief dd{margin:0;color:var(--ink)}
.pi-slots span{display:inline-block;padding:3px 9px;margin:0 4px 4px 0;border-radius:980px;border:1px solid var(--line-2);font-size:13px;white-space:nowrap}
.pi-brief-f{padding:15px 22px;background:var(--bg-2);border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-2)}
.pi-new{display:inline-flex;align-items:center;gap:8px;color:var(--accent-ink);white-space:nowrap}
.pi-new .ico{width:17px;height:17px;color:var(--accent)}
.pi-who{padding:18px 22px 6px}
.pi-who b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em}
.pi-who span{display:inline-flex;margin-top:8px;padding:5px 11px;border-radius:980px;background:var(--accent-soft);color:var(--accent-ink);font-size:13.5px;font-weight:500}

/* ── hard moments ── */
.pi-moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pi-m{background:var(--card);border-radius:var(--r-lg);padding:28px}
.sect:not(.alt) .pi-m{background:var(--bg-2)}
.pi-m .k{display:block;font:500 12px/1 var(--mono);color:var(--muted);margin-bottom:16px}
.pi-m q{display:block;font:italic 400 25px/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
.pi-m p{color:var(--ink-2);font-size:15.5px}

/* ── texts and email ── */
.pi-msgs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;align-items:start}
.pi-phone{background:var(--card);border-radius:var(--r-tile);padding:22px 20px 24px}
.pi-phone-h{display:flex;flex-direction:column;align-items:center;gap:7px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line);font-size:13px;font-weight:600}
.pi-phone-h i{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-size:15px}
.pi-thread{display:flex;flex-direction:column;gap:7px}
.pi-day{align-self:center;font:400 11px/1 var(--mono);color:var(--faint);margin:12px 0 4px}
.pi-b{max-width:86%;padding:9px 13px;border-radius:18px;font-size:14.5px;line-height:1.45}
.pi-b.in{align-self:flex-start;background:var(--bg-2);border-bottom-left-radius:6px}
.pi-b.out{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.pi-mail{background:var(--card);border-radius:var(--r-tile);overflow:hidden}
.pi-mail-h{padding:18px 24px;border-bottom:1px solid var(--line);font-size:14px}
.pi-mail-h div{display:flex;gap:12px;padding:3px 0}
.pi-mail-h span{width:58px;flex:none;color:var(--muted)}
.pi-mail-h b{font-weight:600}
.pi-mail-b{padding:22px 24px 6px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.pi-mail-b p+p{margin-top:12px}
.pi-mail-f{margin-top:16px;padding:14px 24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.pi-mail-f u{text-underline-offset:2px}
.sect.alt .pi-under{background:var(--card);border-radius:var(--r-lg);padding:24px 26px}

/* ── a rule and what we do about it ── */
.pi-laws{border-top:1px solid var(--line-2)}
.pi-law{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr) minmax(0,1fr);gap:20px 36px;padding:48px 0;border-bottom:1px solid var(--line-2);scroll-margin-top:72px}
.pi-law-h .n{display:flex;align-items:center;gap:10px;font:500 12.5px/1 var(--mono);color:var(--muted);margin-bottom:18px}
.pi-law-h .n i{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center}
.pi-law-h .n .ico{width:16px;height:16px}
.pi-law-h h3{font-size:23px;line-height:1.22;letter-spacing:-.025em}
.pi-law-h .src{font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:10px}
.pi-k{display:block;font:500 12px/1 var(--mono);color:var(--muted);margin-bottom:16px}
.pi-rule p,.pi-rule li{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.pi-rule p+p,.pi-rule p+ul,.pi-rule ul+p,.pi-rule ul+.pi-aside,.pi-rule p+.pi-aside{margin-top:12px}
.pi-rule ul li{position:relative;padding-left:17px;margin-top:8px}
.pi-rule ul li::before{content:"";position:absolute;left:3px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--faint)}
.pi-aside{padding:16px 18px;border-left:2px solid var(--ink);border-radius:0 12px 12px 0;background:var(--bg-2);font-size:14.5px!important}
.sect.alt .pi-aside{background:var(--card)}
.pi-aside b{color:var(--ink);font-weight:600}
.pi-do{background:var(--bg-2);border-radius:var(--r-lg);padding:26px 26px 22px}
.sect.alt .pi-do{background:var(--card)}
.pi-do .checks li{font-size:15px;line-height:1.5}
.pi-do .pi-k{color:var(--accent-ink)}
.pi-do-f{font-size:14px;color:var(--muted);margin-top:14px}
.pi-sort{margin-top:64px}
.pi-sort>h3{font:400 clamp(30px,3vw,38px)/1.1 var(--display);letter-spacing:-.01em;margin-bottom:8px}
.pi-sort>p{color:var(--ink-2);margin-bottom:28px;max-width:40em}

/* ── questions for any vendor ── */
.pi-vq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:56px;counter-reset:vq}
.pi-vq li{display:flex;gap:16px;padding:18px 0;border-top:1px solid var(--line-2);font-size:17px;line-height:1.45;letter-spacing:-.012em;counter-increment:vq}
.pi-vq li::before{content:counter(vq,decimal-leading-zero);flex:none;width:24px;font:500 12.5px/1.95 var(--mono);color:var(--muted)}

@media (max-width:1000px){
  .pi-law{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pi-law-h{grid-column:1 / -1}
  .pi-two,.pi-two.mid,.pi-msgs{grid-template-columns:minmax(0,1fr)}
  .pi-two.mid{gap:36px}
  .pi-moments{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pi-flow>li{grid-template-columns:40px minmax(0,1fr)}
  .pi-flow .pi-say,.pi-flow .pi-sys{grid-column:2;margin-top:6px}
}
@media (max-width:760px){
  .pi-hero-facts{margin-top:44px}
  .pi-toc{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:26px -20px 0;padding:0 20px 4px;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .pi-toc::-webkit-scrollbar{display:none}
  .pi-law{grid-template-columns:minmax(0,1fr);padding:40px 0;gap:22px}
  .pi-law-h h3{font-size:21px}
  .pi-do{padding:22px 20px 18px}
  .pi-moments,.pi-vq{grid-template-columns:minmax(0,1fr)}
  .pi-vq{grid-template-rows:none;grid-auto-flow:row}
  .pi-vq li{font-size:16px}
  .pi-flow>li{grid-template-columns:32px minmax(0,1fr);gap:6px 14px;padding:24px 20px}
  .pi-n{width:28px;height:28px;font-size:12px}
  .pi-flow h3{font-size:18px;margin-top:2px}
  .pi-brief dl{padding:4px 18px 8px}
  .pi-brief dl>div{grid-template-columns:minmax(0,1fr);gap:3px}
  .pi-brief-h,.pi-brief-f,.pi-who{padding-left:18px;padding-right:18px}
  .pi-m{padding:24px 22px}
  .pi-m q{font-size:23px}
  .pi-mail-h,.pi-mail-b,.pi-mail-f{padding-left:18px;padding-right:18px}
  .pi-sort{margin-top:48px}
  .sect.alt .pi-under{padding:20px}
  .card .pi-ic{width:38px;height:38px;margin-bottom:18px}
  .card .pi-ic .ico{width:17px;height:17px}
}