/* /use-with-chatgpt-claude/ (pages/use-with-chatgpt-claude.php; 2026-10-21): white cards on the hub family's layout
   (css/purple-hub.css), purple colours with fallbacks for the classic theme. */
.ai-page { --ai-plum: var(--pv-plum, #341e60); --ai-muted: var(--pv-muted, #6b6385); --ai-violet: var(--pv-violet, #634bf5); padding-bottom: 8px; }
.ai-head { padding: 0 0 var(--sp-head, 24px); max-width: 780px; }
.ai-head h1 { font: 600 32px/1.15 'Fredoka', sans-serif !important; color: var(--ai-plum) !important; margin: 0; }
.ai-lead { font-size: 17px; line-height: 1.55; color: var(--ai-plum); margin: 12px 0 0; }

.ai-sec { padding: 22px 24px 24px; }
.ai-sec h2 { font: 600 22px 'Fredoka', sans-serif !important; color: var(--ai-plum) !important; margin: 0 0 6px; }
.ai-sec h3 { font: 600 17px 'Fredoka', sans-serif !important; color: var(--ai-plum); margin: 0 0 6px; }
.ai-sec p, .ai-sec li { font-size: 15px; line-height: 1.55; color: var(--ai-plum); }
.ai-sec a { color: var(--ai-violet); font-weight: 700; text-decoration: none; }
.ai-sec a:hover { text-decoration: underline; }
.ai-sub { margin: 0 0 16px; color: var(--ai-muted) !important; }

.ai-prompts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ai-prompt { display: flex; flex-direction: column; background: var(--pv-cream, #fbf8f3); border-radius: 18px; padding: 16px; }
.ai-text { flex: 1; margin: 0 0 14px; background: #fff; border: 1px solid #ece6f7; border-radius: 12px; padding: 12px 14px; font-size: 14px !important; line-height: 1.5; }
.ai-copy { align-self: flex-start; border: 0; border-radius: 999px; padding: 9px 18px; background: var(--ai-violet); color: #fff; font: 700 14px 'DM Sans', sans-serif; cursor: pointer; }
.ai-copy:hover { background: #5139e0; }

/* The guide for assistants that can't open pages: grade picker, copy, download */
.ai-grades { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.ai-g { border: 2px solid #e6e0f3; background: #fff; border-radius: 999px; padding: 6px 14px; font: 700 13.5px 'DM Sans', sans-serif; color: var(--ai-plum); cursor: pointer; }
.ai-g:hover { border-color: #cfc3f2; }
.ai-g.on { background: var(--ai-violet); border-color: var(--ai-violet); color: #fff; }
.ai-guide-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ai-dl { font: 700 14px 'DM Sans', sans-serif; }
.ai-gsize { font-size: 13px; color: var(--ai-muted); }
.ai-then { margin: 18px 0 8px; }
.ai-prompt-one { max-width: 720px; }

.ai-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; }
.ai-two p { margin: 0 0 10px; }
.ai-ex { font-size: 14px !important; }
.ai-tips { margin: 6px 0 0; padding-left: 20px; }
.ai-tips li { margin: 6px 0; }

.ai-tech p { margin: 0 0 8px; }
.ai-tech ul { margin: 0; padding-left: 20px; }
.ai-tech li { margin: 6px 0; overflow-wrap: anywhere; }
.ai-tech code { font-size: 13px; background: #f4f1fb; border-radius: 6px; padding: 1px 6px; }

.ai-page .kband + .kband, .ai-page .kband + .ending { margin-top: 16px; }

@media (max-width: 900px) { .ai-prompts { grid-template-columns: 1fr; } .ai-two { grid-template-columns: 1fr; gap: 8px; } }
@media (max-width: 760px) { .ai-head h1 { font-size: 26px !important; } .ai-sec { padding: 18px 16px 20px; } }