/* workshop.css — protected workshop page (Equity in AI) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ============ HEADER / FOOTER ============ */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 48px; background: #fff; border-bottom: 1px solid #eef2f6;
  position: static;
}

/* ============ SECTION NAV (sticky) ============ */
.section-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid #e9edf1;
}
.nav-inner { display: flex; align-items: center; gap: 22px; height: 58px; }
.nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.nav-brand img { height: 30px; width: auto; display: block; }
.nav-links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--fg-2);
  text-decoration: none; padding: 8px 14px; border-radius: var(--radius-button);
  white-space: nowrap; transition: color var(--t-fast), background var(--t-fast);
}
.nav-links a:hover { color: var(--color-primary); background: var(--bg-section); }
.nav-links a.active { color: var(--color-primary); background: rgba(42,111,151,0.10); }
section[id] { scroll-margin-top: 74px; }
@media (max-width: 600px) {
  .nav-inner { gap: 14px; }
  .nav-brand { display: none; }
}
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand img { height: 46px; width: auto; display: block; }
.header-tag {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary);
}
.site-footer {
  background: var(--color-near-black); color: #cbd5e1;
  padding: 28px 48px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 13px;
}
.site-footer img { height: 42px; width: auto; }

/* ============ LAYOUT ============ */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.section { padding: 72px 0; }
.section.tight { padding: 52px 0; }
.section.alt { background: var(--bg-section); }
.section-head { margin-bottom: 40px; }
.eyebrow {
  display: inline-block; font-family: var(--font-body); font-size: 12px;
  font-weight: 600; letter-spacing: 0.04em; color: #fff;
  background: var(--color-accent); border-radius: var(--radius-pill);
  padding: 5px 14px; margin-bottom: 16px;
}
.s-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.12;
  color: var(--color-near-black); margin: 0 0 14px; letter-spacing: -0.01em;
}
.s-sub {
  font-family: var(--font-body); font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--fg-3); line-height: 1.5; margin: 0; max-width: 720px;
}

/* ============ WORKSHOP HERO BAND ============ */
.whero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark-blue) 100%);
  color: #fff; padding: 64px 0 70px; position: relative; overflow: hidden;
}
.whero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 85% 0%, rgba(255,255,255,0.12), transparent 55%);
  pointer-events: none;
}
.whero .wrap { position: relative; z-index: 1; }
.whero .kicker {
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.78);
  margin-bottom: 14px;
}
.whero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.08;
  margin: 0 0 18px; letter-spacing: -0.015em;
}
.whero .meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 16px; font-weight: 500; }
.whero .meta .dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.6); }

/* ============ GETTING STARTED ============ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 26px 24px; transition: box-shadow var(--t-base);
}
.step:hover { box-shadow: var(--shadow-card-hover); }
.step .num {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; color: #fff;
  background: var(--color-primary); margin-bottom: 16px;
}
.step h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-near-black); margin: 0 0 8px; }
.step p { font-family: var(--font-body); font-size: 14.5px; color: var(--fg-2); line-height: 1.6; margin: 0; }

/* ============ PADLET ============ */
.padlet-wrap {
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 14px; overflow: hidden;
}
.padlet-embed { border-radius: var(--radius-image); overflow: hidden; }
.padlet-embed iframe { display: block; border: 0; width: 100%; height: 640px; border-radius: var(--radius-image); }

/* ============ FOUR EXPLORERS / TOOLS ============ */
.callout {
  display: flex; gap: 26px; align-items: flex-start;
  background: #fff7ef; border: 1px solid #f3dfc7; border-left: 4px solid var(--color-secondary);
  border-radius: 10px; padding: 22px 28px; margin-bottom: 40px;
}
.callout .lbl {
  font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent); white-space: nowrap; padding-top: 2px;
}
.callout p { margin: 0; font-family: var(--font-body); font-size: 15.5px; line-height: 1.6; color: var(--fg-2); }
.callout a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.tool {
  border-radius: 16px; padding: 22px 22px 24px; color: #fff;
  display: flex; flex-direction: column;
  box-shadow: 0 10px 30px rgba(0,0,0,0.14); min-height: 560px;
}
.tool.t1 { background: var(--color-primary); }
.tool.t2 { background: var(--color-accent); }
.tool.t3 { background: var(--color-secondary); }
.tool.t4 { background: #6e4f8e; }
.tool-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tool-num {
  font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--color-near-black);
  background: #fff; border-radius: 8px; padding: 3px 10px; line-height: 1.2;
}
.tool-cat { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.9); line-height: 1.25; }
.tool-vis { background: rgba(255,255,255,0.14); border-radius: 12px; padding: 14px; margin-bottom: 20px; }
.tool h3 { font-family: var(--font-display); font-weight: 700; font-size: 23px; line-height: 1.18; margin: 0 0 12px; }
.tool p { font-family: var(--font-body); font-size: 15px; line-height: 1.58; margin: 0 0 22px; color: rgba(255,255,255,0.95); }
.tool .spacer { flex: 1; }
.launch {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; border-radius: 10px; padding: 14px 18px; text-decoration: none;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  transition: transform var(--t-fast), box-shadow var(--t-base);
}
.launch:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
.launch:active { transform: translateY(1px); }
.launch .circ { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.t1 .launch { color: var(--color-primary); } .t1 .launch .circ { background: var(--color-primary); }
.t2 .launch { color: var(--color-accent); }  .t2 .launch .circ { background: var(--color-accent); }
.t3 .launch { color: #c8763a; }              .t3 .launch .circ { background: var(--color-accent); }
.t4 .launch { color: #6e4f8e; }              .t4 .launch .circ { background: #6e4f8e; }

/* mini-vis pieces */
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mini-card { background: #fff; border-radius: 8px; padding: 10px; min-height: 96px; }
.mini-card .mc-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; color: #94a3b8; margin-bottom: 8px; }
.mini-line { height: 5px; border-radius: 3px; background: #e6eaf0; margin-bottom: 6px; }
.mini-line.w70 { width: 70%; } .mini-line.w90 { width: 90%; } .mini-line.w50 { width: 50%; }
.mini-line.p { background: #cdb8e4; }
.mc-cap { text-align: center; font-size: 11.5px; font-style: italic; color: rgba(255,255,255,0.9); margin-top: 10px; }
.img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.img-ph { height: 96px; border-radius: 7px; }
.img-ph.a { background: linear-gradient(160deg, #c98a5a, #6e8f7a 70%); }
.img-ph.b { background: linear-gradient(160deg, #4a6b88, #c25c4a 75%); }
.score-card { background: #fff; border-radius: 8px; padding: 14px; }
.score-row { display: flex; align-items: baseline; justify-content: space-between; }
.score-row .s { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--color-near-black); }
.score-row .s small { font-size: 13px; color: #94a3b8; font-weight: 400; font-family: var(--font-body); }
.score-row .s.alt { color: var(--color-accent); }
.score-bar { height: 6px; border-radius: 3px; background: #ece7e0; margin: 10px 0 4px; }
.score-gap { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--color-accent); }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .tool { min-height: 0; }
}
@media (max-width: 600px) {
  .steps, .tools-grid { grid-template-columns: 1fr; }
  .site-header { padding: 14px 20px; }
  .wrap { padding: 0 20px; }
}

/* ============ SCHEDULE ============ */
.sched-doc {
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 32px 30px; overflow-x: auto;
}
.sched-head { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 2px solid var(--color-primary); }
.sched-head .org { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 6px; }
.sched-head .title { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--color-near-black); }
.sched-head .meta { font-size: 13px; color: var(--fg-3); font-style: italic; margin-top: 4px; }
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-2); }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; }
.dot-teal { background: var(--color-primary); }
.dot-apricot { background: var(--color-secondary); }
.dot-coral { background: var(--color-accent); }
.dot-neutral { background: #9CA3AF; }

table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; }
table.grid th {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  padding: 9px 8px; border: 1px solid #e5e7eb; text-align: center;
}
th.dayh { background: var(--color-primary); color: #fff; }
th.timeh { background: var(--color-near-black); color: #fff; width: 80px; }
table.grid td { border: 1px solid #e5e7eb; vertical-align: top; padding: 0; }
td.timec { background: var(--bg-section); text-align: right; padding: 8px 9px; vertical-align: middle; width: 80px; }
.tlabel { display: block; font-family: var(--font-display); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-2); line-height: 1.4; }
.tsub { display: block; font-size: 9.5px; color: var(--fg-3); font-style: italic; margin-top: 3px; }
td.bar-teal { border-left: 4px solid var(--color-primary); }
td.bar-apricot { border-left: 4px solid var(--color-secondary); }
td.bar-neutral { border-left: 4px solid #9CA3AF; }
.sb { padding: 10px 11px; min-height: 78px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.sb.warmup { min-height: 38px; }
.sb-title { font-weight: 600; font-size: 13px; color: var(--color-near-black); line-height: 1.32; }
.sb-parallel { font-weight: 600; font-size: 12.5px; color: var(--color-near-black); line-height: 1.35; }
.sb-note { font-size: 10.5px; color: var(--fg-3); font-style: italic; }
.sb-person { font-size: 11.5px; color: var(--fg-3); font-style: italic; }
.bi-list { padding: 4px 0; }
.bi { padding: 5px 8px 5px 11px; border-bottom: 1px solid #eef1f4; font-size: 11px; font-weight: 600; color: var(--color-near-black); line-height: 1.4; }
.bi:last-child { border-bottom: none; }
.bi.teal { border-left: 3px solid var(--color-primary); }
.bi.apricot { border-left: 3px solid var(--color-secondary); }
.bi.coral { border-left: 3px solid var(--color-accent); }
.bi-divider { height: 5px; background: var(--bg-section); border-top: 1px solid #eef1f4; border-bottom: 1px solid #eef1f4; }
.lunch-bar { display: flex; align-items: center; justify-content: center; min-height: 30px; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 500; }

/* breakout detail */
.breakouts { margin-top: 40px; }
.day-group { margin-bottom: 26px; }
.day-banner { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff; background: var(--color-primary); padding: 8px 16px; border-radius: 6px; margin-bottom: 14px; }
.slot-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); margin: 16px 0 9px; }
.slot-label:first-of-type { margin-top: 0; }
.cards-grid { display: grid; gap: 12px; }
.cards-grid.three { grid-template-columns: repeat(3, 1fr); }
.cards-grid.two { grid-template-columns: repeat(2, 1fr); }
.bc { border: 1px solid #e9edf1; border-radius: 8px; padding: 14px 15px; background: #fff; }
.bc.teal { border-left: 4px solid var(--color-primary); }
.bc.apricot { border-left: 4px solid var(--color-secondary); }
.bc.coral { border-left: 4px solid var(--color-accent); }
.bc-title { font-weight: 600; font-size: 14px; color: var(--color-near-black); margin-bottom: 6px; line-height: 1.3; }
.bc-desc { font-size: 13px; color: var(--fg-2); line-height: 1.5; margin-bottom: 8px; }
.bc-person { font-size: 12px; color: var(--fg-3); font-style: italic; }

@media (max-width: 760px) {
  .cards-grid.three, .cards-grid.two { grid-template-columns: 1fr; }
}

/* planner CTA */
.planner-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin-top: 26px; padding: 28px 32px; text-decoration: none;
  background: var(--gradient-cta); color: #fff; border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); transition: box-shadow var(--t-base), transform var(--t-fast);
}
.planner-cta:hover { box-shadow: var(--shadow-card-hover); }
.planner-cta:active { transform: translateY(1px); }
.pc-eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.8); margin-bottom: 7px; }
.pc-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 7px; line-height: 1.15; }
.pc-sub { font-family: var(--font-body); font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,0.9); max-width: 640px; }
.pc-btn {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  background: #fff; color: var(--color-primary); font-family: var(--font-body);
  font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: var(--radius-button);
}
@media (max-width: 680px) {
  .planner-cta { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ============ FACILITATORS ============ */
.fac-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.fac {
  background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  padding: 22px 16px; text-align: center; transition: box-shadow var(--t-base);
}
.fac:hover { box-shadow: var(--shadow-card-hover); }
.fac .av {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 20px; color: #fff;
}
.fac .name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--color-near-black); }
.fac .role { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); margin-top: 3px; }
@media (max-width: 900px) { .fac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============ PASSWORD GATE ============ */
.gate {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark-blue) 100%);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.gate::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 80% 10%, rgba(255,255,255,0.12), transparent 55%);
}
.gate-card {
  position: relative; z-index: 1; background: #fff; border-radius: 16px;
  box-shadow: var(--shadow-strong); padding: 44px 40px; width: 100%; max-width: 420px; text-align: center;
}
.gate-card img { height: 50px; margin-bottom: 22px; }
.gate-card h2 { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--color-near-black); margin: 0 0 8px; }
.gate-card p { font-family: var(--font-body); font-size: 14.5px; color: var(--fg-3); line-height: 1.55; margin: 0 0 24px; }
.gate-form { display: flex; flex-direction: column; gap: 12px; }
.gate-form input {
  font-family: var(--font-body); font-size: 16px; padding: 13px 16px;
  border: 1.5px solid #d8dee6; border-radius: var(--radius-button); outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast); text-align: center;
}
.gate-form input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(42,111,151,0.15); }
.gate-form input.err { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(231,111,81,0.15); }
.gate-form button {
  font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #fff;
  background: var(--color-primary); border: none; border-radius: var(--radius-button);
  padding: 14px 18px; cursor: pointer; transition: background var(--t-base);
}
.gate-form button:hover { background: var(--color-dark-blue); }
.gate-form button:active { transform: translateY(1px); }
.gate-msg { font-size: 13px; color: var(--color-accent); font-weight: 500; min-height: 18px; margin-top: 2px; }
.gate-back { margin-top: 18px; font-size: 13px; color: var(--fg-3); text-decoration: none; }
.gate-back:hover { text-decoration: underline; }
body.locked { overflow: hidden; }

/* ============ FOUR EXPLORERS (ported tool section) ============ */
.cai-head { margin-bottom: 4px; }
.cai-eyebrow { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: #2A6F97; text-transform: uppercase; letter-spacing: .1em; }
.cai-section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 40px); color: #1a1a1a; margin: 10px 0 12px; line-height: 1.2; letter-spacing: -0.01em; }
.cai-section-sub { font-family: var(--font-body); font-size: 17px; color: #4B5563; line-height: 1.65; max-width: 680px; margin: 0; }

.cai-teacher-note { background: #fffaf2; border: 1px solid #f4d4a8; border-left: 3px solid #F4A261; border-radius: 8px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 24px; margin-top: 28px; }
.cai-teacher-kicker { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: #9a5a14; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.cai-teacher-body { font-family: var(--font-body); font-size: 14.5px; color: #4B5563; line-height: 1.65; flex: 1; min-width: 240px; margin: 0; }
.cai-teacher-body a { color: #2A6F97; text-decoration: underline; text-decoration-color: #F4A261; text-decoration-thickness: 2px; text-underline-offset: 3px; }

.cai-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
@media (max-width: 1060px) { .cai-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .cai-grid { grid-template-columns: 1fr; } }

.cai-card { border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 28px rgba(0,0,0,0.12); outline: 3px solid transparent; outline-offset: -3px; transition: box-shadow 150ms ease-out; }
.cai-card.is-active { outline-color: #1a1a1a; }
.cai-card-header { display: flex; align-items: center; gap: 10px; }
.cai-num { font-family: var(--font-display); font-weight: 700; font-size: 14px; border-radius: 6px; padding: 4px 10px; background: #fff; line-height: 1; }
.cai-kicker { font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,0.85); }

.cai-card-media { height: 152px; display: flex; flex-direction: column; }
.cai-preview { border-radius: 8px; height: 120px; flex-shrink: 0; overflow: hidden; background: rgba(255,255,255,0.15); }
.cai-preview-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 100%; padding: 10px; }
.cai-preview-panel { background: #fff; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cai-preview-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.cai-preview-line { height: 4px; background: #e5e7eb; border-radius: 2px; }
.cai-preview-imgph { border-radius: 6px; min-height: 100%; }
.cai-preview-imgph.india { background: linear-gradient(150deg, #c98a5a 0%, #7a9a6e 75%); }
.cai-preview-imgph.nyc { background: linear-gradient(150deg, #4a6b88 0%, #c25c4a 80%); }
.cai-preview-img-caption { text-align: center; font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,0.78); font-style: italic; margin: 8px 0 0; }
.cai-preview-score-panel { background: #fff; border-radius: 6px; padding: 10px; height: 100%; display: flex; flex-direction: column; gap: 6px; }
.cai-preview-scores { display: flex; gap: 6px; align-items: center; }
.cai-preview-score-num { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #1a1a1a; }
.cai-preview-score-denom { font-size: 10px; color: #94a3b8; }
.cai-preview-gap { margin-top: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

.cai-card-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #fff; line-height: 1.25; margin: 0; }
.cai-card-blurb { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,0.92); line-height: 1.6; flex: 1; margin: 0; }
.cai-card-btn { margin-top: 4px; font-family: var(--font-body); font-weight: 700; font-size: 15px; background: #fff; border: none; border-radius: 8px; padding: 15px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; width: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.18); transition: background 150ms ease-out, color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out; }
.cai-card-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0,0,0,0.24); }
.cai-card-btn .cai-card-btn-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: currentColor; flex-shrink: 0; transition: transform 150ms ease-out; }
.cai-card-btn .cai-card-btn-arrow::before { content: '→'; color: #fff; font-size: 15px; line-height: 1; }
.cai-card-btn:hover .cai-card-btn-arrow { transform: translateX(3px); }
.cai-card-btn.is-open { background: #1a1a1a !important; color: #fff !important; }
.cai-card-btn.is-open .cai-card-btn-arrow { background: #fff; }
.cai-card-btn.is-open .cai-card-btn-arrow::before { content: '\00d7'; color: #1a1a1a; }

.cai-drawer { background: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-top: 24px; padding: 32px; border-top: 3px solid transparent; display: none; }
.cai-drawer.is-visible { display: block; }
.cai-drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 20px; flex-wrap: wrap; }
.cai-drawer-kicker { font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.cai-drawer-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: #1a1a1a; margin: 4px 0 0; }
.cai-drawer-actions { display: flex; gap: 10px; align-items: flex-start; flex-shrink: 0; }
.cai-btn-newtab { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: #2A6F97; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 14px; background: #fff; text-decoration: none; display: inline-block; }
.cai-btn-newtab:hover { background: #f8fafc; }
.cai-btn-close { font-family: var(--font-body); font-size: 13px; font-weight: 600; background: #1F2937; color: #fff; border: none; border-radius: 6px; padding: 8px 14px; cursor: pointer; }
.cai-btn-close:hover { background: #111827; }
.cai-frame { display: block; width: 100%; height: 820px; border: 0; border-radius: 8px; background: #FBFAF7; }

/* ============ PLANNER ACCORDION ============ */
.planner-acc { margin-top: 26px; }
.planner-cta { width: 100%; border: none; cursor: pointer; text-align: left; -webkit-appearance: none; appearance: none; font-family: var(--font-body); }
.pc-chev { transition: transform var(--t-base); flex-shrink: 0; }
.planner-acc.open .pc-chev { transform: rotate(180deg); }
.planner-panel { margin-top: 14px; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); background: #fff; }
.planner-panel[hidden] { display: none; }
.planner-panel iframe { display: block; width: 100%; height: 1040px; border: 0; }
@media (max-width: 1024px) { .planner-panel iframe { height: 1500px; } }

/* ============ SCHEDULE HOVER TOOLTIP ============ */
.tippable { cursor: help; }
#schedule .sb.tippable:hover,
#schedule .bi.tippable:hover { background: rgba(42,111,151,0.07); }
.tippable .sb-title, .tippable .sb-parallel { text-decoration: underline dotted rgba(31,41,55,0.3); text-underline-offset: 3px; }
.bi.tippable { text-decoration: underline dotted rgba(31,41,55,0.28); text-underline-offset: 3px; }
.tippable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.sched-tip {
  position: fixed; z-index: 80; max-width: 300px;
  background: var(--color-near-black); color: #fff;
  border-radius: 8px; padding: 12px 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28); pointer-events: none;
  font-family: var(--font-body);
}
.sched-tip[hidden] { display: none; }
.sched-tip .tt-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.25; margin-bottom: 4px; }
.sched-tip .tt-p { font-size: 12px; color: #cbd5e1; font-style: italic; margin-bottom: 6px; }
.sched-tip .tt-d { font-size: 13px; line-height: 1.5; color: #e8edf2; }