/* Individual Tuition page. Same parent-first language as the homepage and
   About page: warm paper, evergreen ink, sage bands, 12px buttons, 24px panels.
   The research graphs in the middle come from learning-viz.css. */
.it-page {
  --it-ink:#213e38; --it-green:#176859; --it-green-dark:#105447; --it-copy:#5d6c65;
  --it-paper:#fdfbf7; --it-sage:#f0f4ec; --it-sage-2:#e5eee1; --it-line:#dde6df; --it-clay:#c77d48;
  background:var(--it-paper); color:var(--it-ink);
}
html:has(.it-page) body { background:#fdfbf7; }
html:has(.it-page) header { background:rgba(253,251,247,.97)!important; border-color:#e6e9df!important; box-shadow:none; }
.it-page main { overflow:clip; }
.it-page main > section { padding-block:96px; }
.it-wrap { max-width:1180px; margin-inline:auto; padding-inline:36px; }
.it-page :is(a,button,summary):focus-visible { outline:3px solid var(--it-clay); outline-offset:4px; }

.it-eyebrow { color:var(--it-green); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.it-h2 { font-family:Outfit,system-ui,sans-serif; font-size:clamp(28px,3.2vw,44px); line-height:1.15; letter-spacing:-.035em; font-weight:650; color:var(--it-ink); }
.it-head { max-width:660px; margin-bottom:44px; }
.it-head-copy { color:var(--it-copy); font-size:16px; line-height:1.75; margin-top:14px; }
.it-num { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--it-sage-2); color:#386443; font-size:12px; font-weight:700; margin-bottom:20px; }

.it-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding-inline:22px; border-radius:12px; font-size:14px; font-weight:600; transition:transform .15s ease, background-color .15s ease; }
.it-btn:hover { transform:translateY(-2px); }
.it-btn:active { transform:translateY(1px); }
.it-btn--primary { background:var(--it-green); color:#fff; box-shadow:0 5px 0 var(--it-green-dark),0 10px 22px #17685916; }
.it-btn--ghost { background:transparent; color:var(--it-ink); border:1px solid #d6ded5; }
.it-btn--ghost:hover { background:#fff; }
.it-actions { display:flex; flex-wrap:wrap; gap:12px; }
.it-center { display:flex; justify-content:center; margin-top:44px; }

/* Hero */
.it-page main > .it-hero { padding:112px 0 0; }
.it-hero-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; }
.it-hero-title { font-family:Outfit,system-ui,sans-serif; font-size:clamp(38px,4.6vw,60px); line-height:1.08; letter-spacing:-.045em; font-weight:650; color:var(--it-ink); margin-bottom:22px; }
.it-hero-title span { color:var(--it-green); }
.it-lead { color:var(--it-copy); font-size:17px; line-height:1.75; max-width:500px; margin-bottom:28px; }
.it-note { color:#63746a; font-size:12.5px; margin-top:16px; }
.it-hero-art img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:24px; box-shadow:0 30px 60px -40px #0f3b3266; }
.it-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:52px; border-top:1px solid var(--it-line); }
.it-facts > div { display:flex; flex-direction:column; padding:26px 0 30px; }
.it-facts > div + div { padding-left:28px; border-left:1px solid var(--it-line); }
.it-facts dd { font-family:Outfit,system-ui,sans-serif; font-size:clamp(22px,2.3vw,30px); font-weight:650; letter-spacing:-.03em; color:var(--it-ink); line-height:1.1; }
.it-facts dt { order:2; margin-top:6px; color:#617569; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }

/* Benefits */
.it-benefit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.it-benefit { background:#fff; border:1px solid var(--it-line); border-radius:24px; padding:28px 26px 30px; }
.it-benefit h3,.it-step h3,.it-fit-card h3 { font-family:Outfit,system-ui,sans-serif; font-size:19px; font-weight:600; letter-spacing:-.015em; color:var(--it-ink); margin-bottom:10px; }
.it-benefit p,.it-step p,.it-fit-card p { color:var(--it-copy); font-size:14.5px; line-height:1.75; }

/* Who it's for */
.it-fit-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.it-fit-intro > p:not(.it-eyebrow) { color:var(--it-copy); font-size:16px; line-height:1.75; margin-top:14px; max-width:440px; }
.it-fit-intro img { display:block; width:min(100%,340px); height:auto; margin-top:24px; }
.it-fit-list { display:grid; gap:16px; }
.it-fit-card { background:var(--it-sage); border-radius:24px; padding:26px 28px; border-left:4px solid var(--it-green); }

/* Steps */
.it-steps { background:var(--it-sage); }
.it-step-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.it-step { background:var(--it-paper); border-radius:24px; padding:28px 26px 30px; }
.it-step .it-num { background:var(--it-green); color:#fff; }

/* Comparison */
.it-table { border:1px solid var(--it-line); border-radius:24px; overflow:hidden; background:#fff; max-width:960px; }
.it-tr { display:grid; grid-template-columns:.8fr 1fr 1fr; align-items:center; }
.it-tr > span { padding:18px 24px; font-size:15px; line-height:1.5; }
.it-tr + .it-tr { border-top:1px solid var(--it-line); }
.it-tr--head > span { font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#617569; padding-block:16px; background:#f7f8f3; }
.it-tr--head .it-col-one { color:var(--it-green); background:var(--it-sage-2); }
.it-td-label { font-weight:600; color:var(--it-ink); }
.it-td-group { color:#7a8a81; }
.it-td-one { color:var(--it-ink); font-weight:500; background:#f3f7f1; height:100%; display:flex; align-items:center; gap:10px; }
.it-td-one::before { content:""; flex:none; width:18px; height:18px; border-radius:50%; background:var(--it-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

/* Boards and subjects */
.it-cover { background:var(--it-sage); }
.it-board-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.it-board { display:flex; align-items:flex-start; gap:14px; background:var(--it-paper); border:1px solid var(--it-line); border-radius:20px; padding:20px; transition:border-color .15s ease, transform .15s ease; }
.it-board:hover { border-color:var(--it-green); transform:translateY(-2px); }
.it-board img { flex:none; width:40px; height:40px; object-fit:contain; }
.it-board span { display:flex; flex-direction:column; gap:4px; min-width:0; }
.it-board strong { font-size:16px; font-weight:600; color:var(--it-ink); }
.it-board small { font-size:13px; line-height:1.6; color:var(--it-copy); }
.it-board-arrow { flex:none; width:16px; height:16px; margin-left:auto; margin-top:4px; color:var(--it-green); }
.it-subjects { margin-top:40px; }
.it-subjects h3 { font-size:15px; font-weight:600; color:var(--it-ink); margin-bottom:14px; }
.it-subjects ul { display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.it-subjects a { display:inline-flex; align-items:center; height:40px; padding-inline:16px; border-radius:999px; background:var(--it-paper); border:1px solid var(--it-line); color:var(--it-ink); font-size:14px; font-weight:500; transition:border-color .12s ease, color .12s ease; }
.it-subjects a:hover { border-color:var(--it-green); color:var(--it-green); }

/* FAQ */
.it-faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start; }
.it-faq-grid > div:first-child .it-btn { margin-top:24px; }
.it-faq-list { display:grid; gap:12px; }
.it-faq-item { background:#fff; border:1px solid var(--it-line); border-radius:18px; }
.it-faq-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; font-size:15.5px; font-weight:600; color:var(--it-ink); }
.it-faq-item summary::-webkit-details-marker { display:none; }
.it-faq-icon { position:relative; flex:none; width:28px; height:28px; border-radius:50%; background:var(--it-sage-2); }
.it-faq-icon::before,.it-faq-icon::after { content:""; position:absolute; left:50%; top:50%; width:11px; height:2px; background:var(--it-green); translate:-50% -50%; border-radius:2px; transition:rotate .2s ease; }
.it-faq-icon::after { rotate:90deg; }
.it-faq-item[open] .it-faq-icon::after { rotate:0deg; }
.it-faq-item p { padding:0 22px 22px; color:var(--it-copy); font-size:15px; line-height:1.75; }

/* Closing */
.it-page main > .it-close { padding-top:0; }
.it-close-card { display:flex; align-items:center; justify-content:space-between; gap:40px; background:var(--it-sage-2); border-radius:24px; padding:52px 56px; max-width:1108px; }
.it-close-card .it-h2 { font-size:clamp(26px,2.6vw,36px); margin-bottom:10px; }
.it-close-card p { color:var(--it-copy); font-size:16px; line-height:1.7; max-width:520px; }
.it-close-card .it-actions { flex-shrink:0; }

@media (max-width:1024px) {
  .it-benefit-grid,.it-board-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .it-fit-grid,.it-faq-grid { grid-template-columns:1fr; gap:32px; }
  .it-close-card { flex-direction:column; align-items:flex-start; }
}
@media (max-width:767px) {
  .it-page main > section { padding-block:64px; }
  .it-wrap { padding-inline:16px; }
  .it-page main > .it-hero { padding-top:96px; }
  .it-hero-grid { grid-template-columns:1fr; gap:28px; }
  .it-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .it-facts > div:nth-child(3) { padding-left:0; border-left:0; }
  .it-facts > div:nth-child(n+3) { border-top:1px solid var(--it-line); }
  .it-benefit-grid,.it-board-grid,.it-step-list { grid-template-columns:1fr; }
  .it-fit-intro img { display:none; }
  .it-tr { grid-template-columns:1fr 1fr; }
  .it-tr--head > span:first-child { display:none; }
  .it-td-label { grid-column:1 / -1; padding-bottom:4px!important; background:#f7f8f3; font-size:13px!important; text-transform:uppercase; letter-spacing:.06em; color:#617569!important; }
  .it-tr > span { padding:14px 16px; font-size:14px; }
  .it-close-card { padding:34px 22px; }
  .it-actions { width:100%; }
  .it-actions .it-btn { flex:1 1 auto; }
}
@media (prefers-reduced-motion:reduce) {
  .it-btn,.it-board,.it-faq-icon::before,.it-faq-icon::after { transition:none; }
  .it-btn:hover,.it-board:hover { transform:none; }
}