/* Design Thinking × AI: shared brand tokens, no script required. */
.aidt-header { position: sticky; top: 0; z-index: 100; background: var(--bg-sink); border-bottom: 1px solid var(--hairline); }
.aidt-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--nav-h); padding-block: 0.75rem; }
.aidt-header__links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 1.25rem; font-size: var(--t-small); }
.aidt-header__links a { color: var(--fg-soft); }
.aidt-header__links [aria-current] { color: var(--on-grad); }
.aidt-hero { position: relative; padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 9vw, 8rem); overflow: hidden; }
.aidt-hero-partner { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; width: fit-content; max-width: 100%; margin-bottom: 2.5rem; color: var(--fg-soft); }
.aidt-hero-partner__label { font-size: var(--t-small); }
.aidt-hero-partner .aidt-partner__logo { display: block; width: clamp(14rem, 23vw, 20rem); max-width: 100%; flex-shrink: 0; }
.aidt-hero__grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 2.5rem; }
.aidt-hero h1 { max-width: 13ch; }
.aidt-hero .lead { max-width: 36rem; }
.aidt-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.aidt-note { margin-top: 1.5rem; color: var(--fg-dim); font-size: var(--t-small); max-width: 40rem; }
.aidt-section { padding-block: clamp(3rem, 6vw, 6rem); border-top: 1px solid var(--hairline); }
.aidt-section .section__head { margin-bottom: 2.5rem; }
.aidt-section h2 { max-width: 22ch; }
.aidt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.aidt-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aidt-card { min-width: 0; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
.aidt-card h3 { font-size: var(--t-xl); margin-bottom: 1rem; }
.aidt-card p { color: var(--fg-soft); }
.aidt-card .aidt-note { color: var(--fg-dim); }
.aidt-mindsets { display: grid; gap: 0; }
.aidt-mindset { display: grid; grid-template-columns: 2.5rem 0.8fr 1.5fr; gap: 2rem; padding-block: 1.75rem; border-bottom: 1px solid var(--hairline); }
.aidt-mindset h3 { font-size: var(--t-xl); }
.aidt-mindset p { color: var(--fg-soft); }
.aidt-principle { padding: 1.5rem; border-inline-start: 3px solid var(--c-human); background: var(--surface); color: var(--fg-soft); margin-top: 2rem; }
.aidt-steps { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
.aidt-step { display: grid; grid-template-columns: 3rem 1fr 1fr; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.aidt-step h3 { font-size: var(--t-xl); margin-bottom: 0.75rem; }
.aidt-step p { color: var(--fg-soft); }
.aidt-step__number { font-family: var(--font-mono); font-size: var(--t-xl); color: var(--brand-ink); }
.aidt-step__output { border-inline-start: 1px solid var(--hairline-2); padding-inline-start: 1.5rem; }
.aidt-step__output strong { display: block; color: var(--fg); margin-bottom: 0.5rem; font-size: var(--t-small); }
.aidt-step__output p + strong { margin-top: 1rem; }
.aidt-outcomes { list-style: none; padding: 0; display: grid; gap: 1rem; }
.aidt-outcomes li { display: grid; grid-template-columns: 1fr 2fr; gap: 1.5rem; padding-block: 1.25rem; border-bottom: 1px solid var(--hairline); }
.aidt-outcomes span { color: var(--fg-soft); }
.aidt-contact { background: var(--bg-sink); }
.aidt-education h2 { max-width: 28ch; }
.aidt-education h3 { font-size: var(--t-xl); margin-bottom: 1rem; }
.aidt-education h4 { font-size: var(--t-body); margin-bottom: 0.75rem; }
.aidt-education p { color: var(--fg-soft); }
.aidt-education p + p { margin-top: 1rem; }
.aidt-education__block { margin-block: 3rem; }
.aidt-education__journey { padding-inline-start: 1.5rem; display: grid; gap: 1.5rem; margin-block: 2rem; }
.aidt-education__journey li { padding-inline-start: 0.5rem; }
.aidt-education__journey li::marker { color: var(--brand-ink); font-weight: 600; }
.aidt-education__invite { border-top: 1px solid var(--hairline); padding-top: 2rem; }
.aidt-partners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-block: 2rem; }
.aidt-partner { min-width: 0; padding: 1.5rem; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--bg); }
.aidt-partner figcaption { color: var(--fg-dim); font-size: var(--t-small); margin-top: 1rem; }
/* Display the horizontal marks from the original supplied sheets, unchanged. */
.aidt-partner__logo { position: relative; overflow: hidden; }
.aidt-partner__logo img { position: absolute; height: auto; max-width: none; }
.aidt-partner__logo--school { aspect-ratio: 1550 / 520; }
.aidt-partner__logo--school img { width: 123.871%; left: -5.806%; top: -8.654%; }
.aidt-partner__logo--lab { aspect-ratio: 865 / 315; }
.aidt-partner__logo--lab img { width: 236.763%; left: -5.549%; top: -101.587%; }
.aidt-footer { border-top: 1px solid var(--hairline); padding-block: 2rem; color: var(--fg-dim); font-size: var(--t-small); }
.aidt-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
@media (hover: hover) { .aidt-header__links a:hover, .aidt-footer a:hover { color: var(--fg); } }
@media (max-width: 53.75rem) { .aidt-hero__grid { grid-template-columns: 1fr; } .aidt-hero h1 { max-width: 18ch; } .aidt-grid--three { grid-template-columns: 1fr; } }
@media (max-width: 43.75rem) {
  .aidt-partners { grid-template-columns: 1fr; }
  .aidt-header__inner { flex-wrap: wrap; }
  .aidt-header__links { justify-content: flex-start; gap: 1rem; }
  .aidt-grid, .aidt-mindset, .aidt-outcomes li { grid-template-columns: 1fr; gap: 0.75rem; }
  .aidt-step { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .aidt-step__output { grid-column: 2; border-inline-start: 0; padding-inline-start: 0; margin-top: 0.75rem; }
}

/* Visual explanations remain native HTML: selectable, translated and usable without JS. */
.aidt-hero-art { min-width: 0; margin: 0; }
.aidt-hero-art img { width: 100%; height: auto; }
.aidt-hero-art figcaption, .aidt-visual-note { font-size: var(--t-small); color: var(--fg-dim); margin-top: 1rem; }
.aidt-visual-icon { display: block; flex-shrink: 0; color: var(--brand-ink); }
.aidt-mindset > .aidt-visual-icon { margin-top: 0.1rem; }
.aidt-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; list-style: none; padding: 0; }
.aidt-flow__stage { min-width: 0; padding: 1.25rem; border: 1px solid var(--hairline-2); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 0.75rem; }
.aidt-flow__heading { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 0.75rem; min-height: 6.5rem; padding: 0.75rem; }
.aidt-flow__heading h3 { grid-column: 1 / -1; font-size: var(--t-lg); }
.aidt-flow__number, .aidt-case__number { font-family: var(--font-mono); color: var(--fg-dim); font-size: var(--t-small); }
.aidt-flow__human, .aidt-flow__ai, .aidt-flow__boundary { padding: 1rem; font-size: var(--t-small); }
.aidt-flow__stage strong { display: block; margin-bottom: 0.5rem; }
.aidt-flow__stage p { margin: 0; }
.aidt-flow__human, .aidt-flow__ai { flex: 1; }
.aidt-flow__boundary { border-top: 1px solid var(--hairline); color: var(--fg-soft); }
.aidt-flow__human { background: #fff0f5; border-top: 2px solid #d00066; }
.aidt-flow__ai { background: #edf9f7; border-top: 2px solid #087873; margin-top: 0; }
.aidt-flow-return { padding: 1rem 1.5rem; border-bottom: 1px dashed var(--hairline-2); color: var(--fg-soft); font-size: var(--t-small); }
.aidt-flow-return::before { content: "↶ "; color: var(--brand-ink); }
.aidt-details { margin-top: 2rem; border-top: 1px solid var(--hairline-2); border-bottom: 1px solid var(--hairline-2); }
.aidt-details summary { cursor: pointer; font-weight: 600; padding: 1.25rem 0; color: var(--fg); }
.aidt-details[open] { padding-bottom: 1.5rem; }
.aidt-details summary:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 4px; }
.aidt-details > .aidt-grid { margin-top: 1rem; }
.aidt-board { margin: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); background: var(--bg); }
.aidt-board > figcaption { font-weight: 600; font-size: var(--t-lg); margin-bottom: 2rem; }
.aidt-board__columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.aidt-board__column { min-width: 0; }
.aidt-board__column h3 { font-size: var(--t-base); margin-bottom: 1.5rem; }
.aidt-sticky { padding: 1.25rem; margin: 0.75rem 0.5rem; min-height: 5rem; color: var(--fg); }
.aidt-sticky--orange { background: #fff0dc; transform: rotate(-2deg); }
.aidt-sticky--pink { background: #ffe1eb; transform: rotate(2deg); }
.aidt-board__cluster { padding: 1.5rem; border: 2px dashed #087873; border-radius: var(--r-lg); background: #edf9f7; }
.aidt-board__cluster strong { display: block; margin-bottom: 0.75rem; }
.aidt-board__annotation { font-size: var(--t-small); color: var(--fg-dim); margin-top: 1rem; }
.aidt-board__prototype { max-width: 18rem; margin-inline: auto; padding: 0.75rem 1.25rem; border: 2px solid var(--fg); border-radius: var(--r-lg); }
.aidt-board__prototype p { font-size: var(--t-small); border-top: 1px solid var(--hairline); padding-block: 0.5rem; }
.aidt-case { margin-block: 2rem; }
.aidt-case > h4 { font-size: var(--t-xl); max-width: 40ch; }
.aidt-case__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding: 0; list-style: none; margin-top: 2rem; }
.aidt-case__steps li { min-width: 0; border-top: 1px solid var(--hairline-2); }
.aidt-case__art { display: block; width: 100%; height: auto; margin-block: 0.5rem 1rem; }
.aidt-case__steps h5 { font-size: var(--t-base); margin-block: 0.5rem; }
.aidt-case__steps p { font-size: var(--t-small); }
.aidt-education-details { margin-block: 2rem; }
@media (max-width: 53.75rem) {
  .aidt-hero-art { max-width: 38rem; margin-inline: auto; }
  .aidt-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .aidt-flow__heading { padding-inline: 0.25rem; }
  .aidt-flow__heading h3 { font-size: var(--t-base); }
  .aidt-board__columns { gap: 1rem; }
  .aidt-case__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 43.75rem) {
  .aidt-mindset { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
  .aidt-mindset p { grid-column: 2; }
  .aidt-mindset > .aidt-visual-icon { width: 1.75rem; height: 1.75rem; }
  .aidt-flow { grid-template-columns: 1fr; gap: 1rem; }

  .aidt-flow__heading { min-height: 0; }
  .aidt-board__columns { grid-template-columns: 1fr; gap: 2rem; }
  .aidt-board__column + .aidt-board__column { border-top: 1px solid var(--hairline); padding-top: 1.5rem; }
  .aidt-board__prototype { margin-inline: 0; }
  .aidt-case__steps { grid-template-columns: 1fr; gap: 1rem; }
  .aidt-case__steps li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; padding-top: 1rem; align-items: start; }
  .aidt-case__art { margin: 0; }
}
.aidt-hero__grid { grid-template-areas: "copy art" "actions art"; row-gap: 1.5rem; }
.aidt-hero-copy { grid-area: copy; }
.aidt-hero-art { grid-area: art; }
.aidt-hero__grid > .aidt-actions { grid-area: actions; margin-top: 0; }
@media (max-width: 53.75rem) { .aidt-hero__grid { grid-template-areas: "copy" "art" "actions"; } }

/* Learning rules and rhythm: readable HTML on desktop and phone. */
.aidt-learning { margin-block: 2rem 3rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--hairline-2); border-radius: var(--r-md); }
.aidt-learning h3 { font-size: var(--t-xl); margin-bottom: 1.5rem; }
.aidt-learning h4 { font-size: var(--t-lg); margin-bottom: 0.75rem; }
.aidt-learning__rules, .aidt-learning__rhythm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; padding: 0; }
.aidt-learning__rules { counter-reset: rule; margin-bottom: 2rem; }
.aidt-learning__rules li { counter-increment: rule; border-top: 2px solid var(--brand-ink); padding-top: 1rem; }
.aidt-learning__rules h4::before { content: counter(rule) " · "; color: var(--brand-ink); }
.aidt-learning p { color: var(--fg-soft); }
.aidt-learning__rhythm { gap: 0.5rem; margin-bottom: 1rem; }
.aidt-learning__rhythm li { position: relative; background: #edf9f7; padding: 1rem; font-size: var(--t-small); text-align: center; }
.aidt-learning__rhythm li:nth-child(2) { background: #fff0f5; }
.aidt-learning__rhythm li + li::before { content: "→"; position: absolute; left: -0.65rem; color: var(--brand-ink); }
.aidt-art-label { display: inline-block; margin-top: 0.5rem; padding: 0.2rem 0.5rem; background: var(--surface); color: var(--fg-dim); font-size: var(--t-small); border-radius: var(--r-sm); }
.aidt-heritage-art { display: block; width: 100%; height: auto; margin-block: 1rem; color: var(--fg-soft); }
@media (max-width: 43.75rem) {
  .aidt-learning__rules, .aidt-learning__rhythm { grid-template-columns: 1fr; }
  .aidt-learning__rhythm li + li::before { content: "↓"; left: calc(50% - 0.35rem); top: -0.85rem; }
}