/* Product and career: clear surfaces, compact stories, room to explore. */
.window--caddie, .window--about { overflow: clip; }
.window--caddie .win-body { padding: 28px 32px 32px; overflow-anchor: none; scroll-behavior: auto; scrollbar-gutter: stable; }
.product-intro { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.product-intro h2 { font-size: 44px; margin-bottom: 4px; }
.product-intro p { margin: 0; color: #606366; font-size: 19px; line-height: 1.4; }
.product-visit { flex: none; color: #272a29; font-size: 13px; font-weight: 600; border-bottom: 1px solid #bec2bd; padding: 6px 0; }
.product-visit:hover { color: #a34c24; border-color: currentColor; }
.product-demo { display: block; width: 100%; height: 640px; border: 0; border-radius: 24px; background: white; }
.founder-story { margin-top: 30px; }
.founder-story > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.founder-story h3 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.035em; }
.founder-story > header > span { font-size: 12px; color: #72776c; }
.founder-chapter { box-sizing: border-box; border-top: 1px solid #e1e3db; transition: background-color .32s ease, border-color .32s ease, border-radius .32s ease; }
.founder-chapter.is-animating { overflow: clip; }
.founder-chapter:last-child { border-bottom: 1px solid #e1e3db; }
.founder-chapter summary { display: flex; align-items: center; gap: 16px; cursor: pointer; padding: 20px 8px; list-style: none; }
.founder-chapter summary::-webkit-details-marker { display: none; }
.chapter-number { color: #7a826f; font-size: 12px; font-variant-numeric: tabular-nums; }
.founder-chapter strong { flex: 1; font-size: 16px; font-weight: 600; color: #2a3027; }
.chapter-tag { font-size: 11px; color: #797c76; }
.chapter-toggle { transition: transform .32s cubic-bezier(.22, .75, .25, 1); font-size: 23px; width: 20px; text-align: center; color: #737d68; }
.founder-chapter.is-expanded { background: #f4f6ee; border-radius: 10px; border-color: transparent; }
.founder-chapter.is-expanded .chapter-toggle { transform: rotate(45deg); }
.chapter-body { padding: 0 42px 22px; }
.chapter-body p { font-size: 16px; line-height: 1.65; color: #3c4535; margin: 0 0 16px; max-width: 62ch; }
.chapter-body > span { font-size: 11px; color: #6c775f; letter-spacing: .025em; }
.founder-chapter summary:focus-visible, .journey-years button:focus-visible { outline: 2px solid #466c40; outline-offset: -3px; }

.window--about .win-body { padding: 28px 36px 32px; scroll-behavior: auto; }
.journey-intro { display: flex; align-items: center; gap: 24px; margin-bottom: 26px; }
.journey-intro img { width: 112px; height: 112px; object-fit: cover; border-radius: 50%; flex: none; }
.journey-intro > div { flex: 1; min-width: 0; }
.journey-intro > div > span { font-size: 11px; color: #887762; letter-spacing: .06em; }
.journey-intro h2 { font-size: 30px; margin: 6px 0 8px; }
.journey-intro p { font-size: 14px; line-height: 1.55; color: #62605b; margin: 0; }
.journey-years { display: flex; gap: 3px; justify-content: space-between; position: sticky; top: -28px; z-index: 2; background: #fff; padding: 14px 0; border-bottom: 1px solid #e9e4dd; margin-bottom: 22px; }
.journey-years button { min-height: 38px; flex: 1; padding: 6px 3px; border: none; border-radius: 8px; background: none; font: inherit; font-size: 12px; color: #80776e; cursor: pointer; transition: background .2s, color .2s; }
.journey-years button[aria-current] { background: #ede3d6; color: #70421e; font-weight: 700; }
.journey-years button:hover { background: #f6f0e8; color: #70421e; }
.journey-track { --rail-x: 6px; --track-inset: 32px; position: relative; padding-left: var(--track-inset); }
.journey-track::before { content: ''; position: absolute; left: var(--rail-x); top: 21px; bottom: 30px; width: 1px; background: #d9c9b6; }
.journey-year { padding: 6px 0 16px; }
.journey-year h3 { margin: 0 0 12px; font-size: 32px; letter-spacing: -.05em; font-weight: 500; color: #a47648; }
.milestone { position: relative; padding: 0 0 12px; }
.milestone-dot { position: absolute; left: calc(var(--rail-x) + .5px - var(--track-inset)); transform: translateX(-50%); top: 25px; width: 7px; height: 7px; background: #a47648; border: 2px solid white; border-radius: 50%; }
.milestone > div { padding: 15px 18px; border: 1px solid #ede6dc; border-radius: 14px; background: #fbf9f5; transform-origin: top left; }
.milestone h4 { font-size: 16px; font-weight: 600; color: #352e26; margin: 0 0 8px; letter-spacing: -.02em; }
.milestone p { font-size: 14px; line-height: 1.55; margin: 0; color: #6c6257; }
.journey-reveals .milestone > div { opacity: .18; transform: translateY(16px) scale(.98); transition: opacity .5s ease, transform .5s ease; }
.journey-reveals .milestone.is-revealed > div { opacity: 1; transform: none; }
.about-toolkit { margin: 18px 0 0 32px; padding-top: 24px; border-top: 1px solid #ded1bf; }
.about-toolkit > h3 { margin: 0 0 22px; color: #352e26; font-size: 21px; font-weight: 600; letter-spacing: -.025em; }
.toolkit-section { margin-top: 22px; }
.toolkit-section > h4 { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: #967249; }
.education-summary { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.education-summary strong { font-size: 14px; font-weight: 600; color: #352e26; }
.education-summary > span { font-size: 12px; color: #827361; }
.education-summary p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: #6c6257; line-height: 1.7; }
.course-list { margin: 0; }
.course-list > div { padding: 12px 0; border-bottom: 1px solid #eee8df; }
.course-list > div:first-child { padding-top: 0; }
.course-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.course-list dt, .toolkit-tools dt { font-size: 13px; font-weight: 600; color: #3c332a; line-height: 1.5; }
.course-list dd { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: #827361; }
.toolkit-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin: 0; }
.toolkit-tools dd, .toolkit-practice p { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #6c6257; }
.toolkit-practice { border-top: 1px solid #eee8df; padding-top: 20px; }
@media (max-width: 639px) {
  .window--caddie .win-body, .window--about .win-body { padding: 22px 18px 26px; }
  .product-intro { position: relative; gap: 10px; align-items: flex-start; margin-bottom: 20px; }
  .product-intro h2 { font-size: 36px; }
  .product-intro p { font-size: 16px; max-width: none; }
  .product-visit { position: absolute; right: 0; top: 2px; font-size: 11px; margin-top: 8px; }
  .product-demo { height: clamp(260px, calc(100svh - 320px), 500px); border-radius: 20px; }
  .founder-story h3 { font-size: 21px; }
  .founder-story > header > span { font-size: 10px; }
  .founder-chapter summary { gap: 10px; padding: 18px 8px; }
  .founder-chapter strong { font-size: 14px; }
  .chapter-tag { display: none; }
  .chapter-body { padding: 0 14px 20px 34px; }
  .chapter-body p { font-size: 15px; }
  .journey-intro { gap: 16px; align-items: flex-start; }
  .journey-intro img { width: 76px; height: 76px; }
  .journey-intro h2 { font-size: 24px; line-height: 1.1; }
  .journey-intro p { font-size: 14px; }
  .journey-intro > div > span { font-size: 10px; }
  .journey-years { top: -22px; gap: 0; }
  .journey-years button { font-size: 10px; min-height: 44px; }
  .journey-track { --track-inset: 24px; }
  .journey-year h3 { font-size: 29px; }
  .milestone > div { padding: 14px; }
  .milestone h4 { font-size: 15px; }
  .milestone p { font-size: 13px; }
  .about-toolkit { margin-left: 24px; }
  .toolkit-tools { grid-template-columns: 1fr; }
}
/* Supporting milestones use a quiet bullet instead of a full accomplishment card. */
.milestone--minor > div { padding: 8px 18px 10px; border: 0; border-radius: 0; background: none; }
.milestone--minor .milestone-dot { top: 14px; width: 5px; height: 5px; background: #b8a48a; }
.milestone--minor h4 { font-size: 14px; font-weight: 500; letter-spacing: 0; color: #655544; margin-bottom: 4px; }
.milestone--minor p { font-size: 13px; color: #7a6f62; }
@media (max-width: 639px) {
  .milestone--minor > div { padding: 6px 14px 8px; }
  .milestone--minor .milestone-dot { top: 12px; }
  .milestone--minor h4 { font-size: 13px; }
  .milestone--minor p { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-reveals .milestone > div { opacity: 1; transform: none; transition: none; }
  .journey-years button { transition: none; }
}

/* The marketing demos retain their original proportions at every accordion width. */
.chapter-body--demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 533px); gap: 24px; align-items: center; padding-right: 24px; }
.chapter-body--demo p { margin-bottom: 0; }
.feature-demo-slot { width: 100%; max-width: 533px; aspect-ratio: 533 / 297; overflow: hidden; border-radius: 14px; background: #f8f8f6; }
.feature-demo { display: block; width: 100%; height: 100%; border: 0; }
.feature-design-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: #466c40; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .chapter-body--demo { grid-template-columns: 1fr; gap: 16px; }
  .feature-demo-slot { justify-self: center; }
}
@media (max-width: 639px) {
  .chapter-body--demo { padding: 0 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .founder-chapter, .chapter-toggle { transition: none; }
}