/* Program guide pages (Queen's Commerce, Ivey AEO). Shared tokens, header, footer, .btn, .kicker, .hl and .cta come from ../blog/blog.css. */
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.tint { background: var(--mist); }

/* Hero */
.p-hero { padding: clamp(56px, 6vw, 96px) 0 clamp(56px, 6vw, 88px); }
.p-hero .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 112px); align-items: center; }
.p-hero h1 { font-size: clamp(40px, 4.2vw, 66px); line-height: 1.08; }
.p-hero .lede { color: var(--muted); font-size: 1.13em; max-width: 600px; margin: 26px 0 40px; }
.p-hero .ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.p-hero .photo img { width: 100%; max-width: 560px; aspect-ratio: 1; object-fit: contain; display: block; margin-left: auto; }

/* Step index */
.toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px 0 40px; }
.toc small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 32px; counter-reset: s; }
.toc li { counter-increment: s; }
.toc a { display: flex; gap: 14px; align-items: baseline; text-decoration: none; padding: 8px 0; border-bottom: 1px solid var(--line); }
.toc a::before { content: counter(s, decimal-leading-zero); font: 600 12.5px "Open Sans", sans-serif; letter-spacing: .1em; color: var(--muted); }
.toc a:hover { color: var(--blue); }

/* Steps */
.step { padding: clamp(72px, 7vw, 120px) 0; scroll-margin-top: 84px; }
.step .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.step.has-img .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.step.has-img.flip .wrap > figure { order: -1; }
.step .content { max-width: 780px; }
/* Steps without a photo use the full width for their cards; running text stays at reading width */
.step:not(.has-img) .content { max-width: none; }
.step:not(.has-img) .content > :is(p, .list, .callout, h3) { max-width: 780px; }
.step .num { font: 600 12.5px "Open Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--navy); display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.step .num::before { content: ""; width: 32px; height: 2px; background: var(--gold); }
.step h2 { font-size: clamp(32px, 3.2vw, 48px); margin-bottom: 24px; }
.step h3 { font: 600 17px "Open Sans", sans-serif; color: var(--ink); margin: 0 0 12px; }
.step p { margin: 0 0 18px; }
.step figure { margin: 0; position: sticky; top: 120px; }
.step figure img { width: 100%; display: block; }

.list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.list li { padding-left: 32px; position: relative; }
.list li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border: 1px solid var(--blue); border-radius: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e17b2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat; }
.list.no li::before { border-color: var(--muted);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676b7c' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }

/* Side-by-side cards (does/doesn't consider, written/video rubric) */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 30px 0; }
.box { background: #fff; border: 1px solid var(--line); padding: 32px 30px 26px; display: flex; flex-direction: column; }
.tint .box { border-color: #fff; }
.box h3 { font: 400 24px/1.25 Lora, serif; color: var(--ink); margin: 0 0 18px; padding-bottom: 16px; position: relative; }
.box h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--gold); }
.box .list { flex: 1; align-content: start; }
.box .download { margin-top: 8px; color: var(--blue); font-weight: 600; font-size: 14.5px; text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; }

/* Rubric criteria grid (Ivey) */
.criteria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 30px 0; }
.criteria > div { background: #fff; padding: 30px 28px; }
.criteria h3 { font: 400 24px/1.25 Lora, serif; margin: 0 0 10px; }
.criteria p { margin: 0; color: var(--muted); font-size: .95em; }

/* "Your Alpha advisor..." callout */
.callout { display: flex; gap: 18px; align-items: flex-start; background: var(--mist); border-left: 2px solid var(--gold); padding: 24px 28px; margin: 28px 0 0; color: var(--ink); }
.tint .callout { background: #fff; }
.callout img { width: 30px; height: 30px; flex: none; margin-top: 1px; }
.callout p { margin: 0; }
.note { color: var(--muted); }
.example { font-style: normal; border-left: 2px solid var(--line); padding-left: 20px; color: var(--muted); }

@media (max-width: 960px) {
  .p-hero .grid, .step.has-img .wrap, .pair, .criteria { grid-template-columns: 1fr; }
  .step.has-img.flip .wrap > figure { order: 0; }
  .step figure { position: static; max-width: 460px; }
  .p-hero .photo img { margin: 0 auto; max-width: 440px; }
}
@media (max-width: 560px) {
  .box, .criteria > div { padding: 26px 22px 22px; }
  .callout { padding: 20px; gap: 14px; }
}