/* Parent-facing homepage. Brand palette, local fonts, no third-party UI runtime. */
@font-face { font-family: "Onest"; src: url("/assets/fonts/Onest-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("/assets/fonts/Unbounded-Variable.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
.brand-home { --sales-muted: #526779; }
.brand-home [hidden] { display: none !important; }
.brand-home :is(a, button):focus-visible { outline: 3px solid #234a73; outline-offset: 4px; }
.brand-home .vision-demo button:focus-visible { outline-color: #ffd343; }
.brand-home :is(section, aside)[id] { scroll-margin-top: 102px; }
.brand-home .nav-links { gap: 24px; }
.brand-home .nav-login { display: inline-flex; gap: 12px; align-items: center; padding: 10px 16px; border: 1px solid #cadbe8; border-radius: 7px; color: #234a73; }
.brand-home .nav-login:hover { background: #eaf3fa; text-decoration: none; }
.brand-home .hero { padding: 68px 0 72px; }
.brand-home .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 52px; }
.brand-home .eyebrow { max-width: 42ch; font: 600 11px/1.6 "Onest", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.brand-home .hero-copy h1 { margin: 20px 0 24px; max-width: 16ch; font-size: clamp(2.2rem, 3.55vw, 3.25rem); line-height: 1.2; letter-spacing: -.035em; text-wrap: balance; }
.brand-home .hero-copy h1 span { display: inline; }
.brand-home .hero-lead { max-width: 51ch; font-size: 17px; line-height: 1.7; }
.brand-home .hero-actions { flex-wrap: wrap; gap: 18px 22px; margin-top: 28px; }
.brand-home .btn { font-family: "Onest", sans-serif; border-radius: 8px; font-size: 14px; padding: 14px 18px; box-shadow: none; }
.brand-home .btn.primary { box-shadow: none; }
.brand-home .hero-facts { margin-top: 36px; }
.brand-home .hero-facts strong { font-size: 13px; }
.brand-home .hero-facts li span { font-size: 11px; }
.brand-home .vision-demo { box-shadow: none; border-radius: 18px; }
.brand-home .demo-caption strong { font-size: 15px; }
.brand-home .demo-caption span { font-size: 12px; line-height: 1.6; }
.brand-home .demo-topline { padding: 24px 24px 18px; }
.brand-home .demo-stage { padding: 14px 24px 22px; }
.brand-home .demo-caption { padding: 0 24px 24px; }
.brand-home .learning-path { background: #fff6d4; border-block: 1px solid #eddfad; }
.brand-home .path-row { min-height: 74px; font-family: "Onest", sans-serif; font-size: 13px; font-weight: 500; }
.brand-home .path-emphasis { font-weight: 700; }
.brand-home .path-row a { text-decoration: underline; text-underline-offset: 4px; font-size: 12px; }
.brand-home .sales-section, .brand-home .program-section, .brand-home .format-section { padding: 96px 0; }
.brand-home .section-heading { display: grid; grid-template-columns: 1.15fr .85fr; align-items: end; gap: 64px; margin-bottom: 42px; }
.brand-home .section-kicker { margin: 0 0 18px; color: #3776ab; font: 600 10px/1.5 "Onest", sans-serif; letter-spacing: .12em; }
.brand-home :is(.sales-section, .program-section, .format-section, .purchase-section) h2 { margin: 0; color: #234a73; font: 600 clamp(1.65rem, 2.65vw, 2.25rem)/1.3 "Unbounded", sans-serif; letter-spacing: -.025em; text-wrap: balance; }
.brand-home .sales-lead { margin: 0; max-width: 52ch; color: #526779; font-size: 15px; line-height: 1.8; }
.result-workbench { border: 1px solid #cddde9; border-radius: 16px; background: #fff; overflow: hidden; }
.workbench-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #dce6ee; }
.workbench-label { color: #526779; font-size: 12px; }
.example-options { display: flex; flex-wrap: wrap; gap: 6px; }
.example-options button { padding: 8px 12px; border: 1px solid transparent; border-radius: 6px; background: #fff; color: #526779; font: 500 12px "Onest", sans-serif; cursor: pointer; }
.example-options button:hover { background: #f2f6f9; }
.example-options button[aria-pressed=true] { border-color: #c7dce9; background: #eaf3fa; color: #234a73; }
.workbench-main { padding: 24px; }
.image-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.image-pair figure { min-width: 0; margin: 0; }
.image-pair figcaption { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; color: #234a73; font-size: 12px; font-weight: 600; }
.image-step { color: #7990a2; font: 400 11px Consolas, monospace; }
.photo-stage { display: grid; place-items: center; aspect-ratio: 1.5; border-radius: 9px; overflow: hidden; background: #eaf3fa; }
.photo-stage img, .photo-stage canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.result-stage { background: #eff4f8; background-image: linear-gradient(#d8e4ed77 1px, transparent 1px), linear-gradient(90deg, #d8e4ed77 1px, transparent 1px); background-size: 22px 22px; }
.showcase-placeholder { padding: 20px; color: #526779; text-align: center; font-size: 15px; }
.showcase-placeholder span { display: inline-block; margin-top: 8px; font-size: 12px; }
.workbench-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 28px; margin-top: 22px; padding: 20px; border-radius: 8px; background: #f7fafc; }
.code-language { grid-column: 1; margin: 0 0 10px; color: #526779; font: 500 10px Consolas, monospace; letter-spacing: .06em; }
.workbench-code pre { grid-column: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: #234a73; font: 400 12px/1.85 Consolas, monospace; overflow-x: auto; }
.workbench-code code { padding: 0; background: transparent; color: inherit; font: inherit; }
.example-action { grid-column: 2; grid-row: 1 / 3; align-self: center; max-width: 248px; }
.example-action .btn { width: 100%; }
.showcase-run:disabled { background: #b2c7d8 !important; cursor: wait; transform: none !important; }
.showcase-status { min-height: 6em; margin: 10px 0 0; color: #526779; font-size: 11px; line-height: 1.5; }
.showcase-status.is-error { color: #9a3a2e; }
.workbench-note { margin: 0; padding: 16px 24px; border-top: 1px solid #e0e8ef; color: #627a8d; font-size: 11px; line-height: 1.7; }
.result-takeaway { display: flex; align-items: flex-start; gap: 18px; margin-top: 24px; }
.takeaway-mark { color: #3776ab; font-size: 26px; line-height: 1.3; }
.result-takeaway p { max-width: 81ch; margin: 0; color: #526779; font-size: 14px; line-height: 1.7; }
.result-takeaway strong { color: #234a73; }
.result-takeaway p + p { margin-top: 14px; }
.brand-home .parent-section { background: #eaf3fa; }
.parent-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 94px; align-items: start; }
.parent-intro h2 span { color: #3776ab; }
.parent-intro > p:not(.section-kicker) { margin: 24px 0; max-width: 43ch; color: #526779; font-size: 15px; line-height: 1.8; }
.parent-intro .text-link { font-size: 13px; }
.course-topics { margin-top: 24px; }
.course-topics summary { width: fit-content; max-width: 100%; color: #234a73; font-size: 13px; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.course-topics summary:focus-visible { outline: 2px solid #3776ab; outline-offset: 5px; border-radius: 2px; }
.course-topics-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid #bfd1df; color: #526779; font-size: 14px; line-height: 1.7; }
.course-topics-body p { margin: 0 0 12px; }
.course-topics-body ul { margin: 0; padding-left: 20px; }
.course-topics-body li + li { margin-top: 10px; }
.course-topics-body strong { color: #234a73; font-weight: 600; }
.concern-item { display: grid; grid-template-columns: 26px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid #bfd1df; }
.concern-item:first-child { padding-top: 0; border-top: 0; }
.concern-number { padding-top: 4px; color: #3776ab; font: 400 11px Consolas, monospace; }
.concern-item h3 { margin: 0 0 10px; color: #234a73; font-size: 17px; font-weight: 600; line-height: 1.5; }
.concern-item p { margin: 0; color: #526779; font-size: 14px; line-height: 1.8; }
.program-blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.program-blocks article { min-width: 0; padding: 34px; border-radius: 14px; }
.program-foundation { background: #eaf3fa; }
.program-vision { background: #fff4c9; }
.chapter-label { display: block; margin-bottom: 20px; color: #526779; font-size: 11px; }
.program-blocks h3 { margin: 0 0 18px; color: #234a73; font: 600 clamp(1.3rem, 2vw, 1.65rem)/1.4 "Unbounded", sans-serif; letter-spacing: -.035em; }
.program-blocks p { color: #526779; font-size: 14px; line-height: 1.75; }
.mini-code { display: grid; margin-top: 28px; padding: 24px; border-radius: 8px; background: #fff; color: #234a73; font: 400 14px/1.9 Consolas, monospace; white-space: pre; overflow-x: auto; }
.mini-code b { color: #8b4380; font-weight: 500; }
.mini-code em { color: #356b4a; font-style: normal; }
.program-blocks img { display: block; width: 100%; height: auto; margin: 24px 0 18px; border-radius: 8px; }
.program-blocks .program-caption { margin-bottom: 0; color: #627485; font-size: 11px; line-height: 1.65; }
.program-outcomes { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; margin-top: 44px; padding-top: 32px; border-top: 1px solid #cfdeea; }
.program-outcomes h3 { max-width: 23ch; margin: 0; color: #234a73; font-size: 20px; font-weight: 600; }
.program-outcomes .checklist li { padding: 12px 0; font-size: 14px; }
.brand-home .thinking-section { border-block: 1px solid #d5e2ec; background: #fff; }
.thinking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 94px; }
.thinking-grid .sales-lead { margin-top: 24px; }
.thinking-steps { margin: 0; padding: 0; list-style: none; }
.thinking-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 18px; padding: 22px 0; border-bottom: 1px solid #e0e8ef; }
.thinking-steps li:first-child { padding-top: 0; }
.thinking-steps li > span { display: grid; place-items: center; align-self: start; width: 36px; height: 36px; background: #fff4c9; color: #234a73; border-radius: 7px; font: 400 11px Consolas, monospace; }
.thinking-steps h3 { margin: 0 0 7px; color: #234a73; font-size: 16px; font-weight: 600; }
.thinking-steps p { margin: 0; color: #526779; font-size: 14px; }
.brand-home .format-section { background: #f7fafc; }
.practice-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.practice-window { padding: 28px; border: 1px solid #cddde9; border-radius: 14px; background: #fff; }
.practice-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid #e0e8ef; color: #526779; font-size: 11px; }
.practice-top span:first-child { color: #234a73; font-weight: 600; }
.practice-window h3 { margin: 26px 0; color: #234a73; font-size: 24px; font-weight: 600; line-height: 1.4; }
.practice-line { display: flex; align-items: center; gap: 16px; margin: 6px -10px; padding: 12px 10px; color: #526779; font-size: 13px; }
.practice-line span { font: 400 10px Consolas, monospace; }
.practice-line p { flex: 1; margin: 0; }
.practice-line.is-current { border-left: 3px solid #ffd343; border-radius: 4px; background: #eaf3fa; color: #234a73; }
.practice-line b { float: right; }
.practice-foot { margin: 22px 0 0; color: #627485; font-size: 11px; }
.brand-home .format-steps li { padding: 24px 0; }
.brand-home .format-steps strong { font-size: 17px; }
.brand-home .format-steps p { font-size: 14px; line-height: 1.8; }
.brand-home .questions-section { padding-top: 0; }
.questions-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; margin: 0; }
.questions-list > div { padding: 24px 0; border-top: 1px solid #cfdeea; }
.questions-list dt { margin: 0 0 12px; color: #234a73; font-size: 17px; font-weight: 600; }
.questions-list dd { margin: 0; max-width: 57ch; color: #526779; font-size: 14px; line-height: 1.8; }
.brand-home .purchase-section { padding: 0 0 80px; }
.brand-home .app-card { grid-template-columns: 48px 1fr minmax(210px, auto); align-items: start; gap: 26px; margin: 0; padding: 42px; border: 1px solid #cddde9; border-radius: 16px; background: #fff; box-shadow: none; }
.brand-home .app-card img { width: 48px; height: 48px; }
.brand-home .app-card .purchase-label { margin-bottom: 16px; font: 600 10px "Onest", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.brand-home .app-card h2 { margin: 0 0 18px; font-size: clamp(1.4rem, 2.1vw, 1.8rem); }
.brand-home .app-card p:not(.purchase-label) { max-width: 53ch; margin: 0 0 16px; font-size: 14px; line-height: 1.8; }
.purchase-disclosure { display: block; max-width: 58ch; color: #627485; font-size: 11px; line-height: 1.7; }
.purchase-actions { display: grid; align-self: center; gap: 16px; justify-items: start; }
.brand-home .btn.yellow { box-shadow: none; }
.purchase-back { color: #526779 !important; font-size: 12px; text-decoration: underline; text-underline-offset: 4px; }
.brand-home .footer-inner { flex-wrap: wrap; }
.brand-home .footer-legal { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; margin-top: 16px; padding-top: 18px; border-top: 1px solid #54728e; }
.brand-home .footer-legal a { font-size: 11px; font-weight: 400; color: #d5e1eb; }
@media (max-width: 1000px) {
  .brand-home .nav-link { display: none; }
  .brand-home .nav-login { display: inline-flex; }
  .brand-home .hero-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .brand-home .hero-copy h1 { font-size: 32px; }
  .brand-home .hero-lead { font-size: 15px; }
  .brand-home .hero-facts { grid-template-columns: 1fr; }
  .brand-home .hero-facts li { padding: 8px 0; border: 0 !important; }
  .brand-home .section-heading { gap: 36px; }
  .parent-grid, .thinking-grid, .practice-layout { gap: 42px; }
  .workbench-code { grid-template-columns: 1fr; }
  .example-action { display: flex; align-items: center; gap: 18px; grid-column: 1; grid-row: auto; max-width: none; margin-top: 20px; }
  .example-action .btn { flex: 0 0 auto; width: auto; }
  .showcase-status { margin: 0; }
  .brand-home .app-card { grid-template-columns: 42px 1fr; padding: 32px; }
  .purchase-actions { grid-column: 2; }
}
@media (max-width: 760px) {
  .brand-home .wrap { width: calc(100% - 36px); }
  .brand-home .nav-inner { height: 70px; }
  .brand-home .brand-mark { width: 36px; height: 36px; }
  .brand-home .brand-name { font-size: 12px; }
  .brand-home .nav-login { padding: 8px 12px; font-size: 12px; }
  .brand-home .hero { padding: 44px 0 48px; }
  .brand-home .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .brand-home .hero-copy h1 { max-width: 19ch; font-size: clamp(28px, 6.7vw, 38px); }
  .brand-home .hero-lead { max-width: 58ch; }
  .brand-home .hero-actions { flex-direction: row; align-items: center; }
  .brand-home .hero-actions .text-link { font-size: 13px; }
  .brand-home .hero-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .brand-home .hero-facts strong { font-size: 11px; }
  .brand-home .hero-facts li span { font-size: 10px; }
  .brand-home .vision-demo { width: 100%; max-width: none; }
  .brand-home .demo-topline { flex-direction: row; align-items: center; padding: 18px; }
  .brand-home .tech-label { font-size: 10px; }
  .brand-home .demo-stage { padding: 0 18px 18px; }
  .brand-home .demo-caption { padding: 0 18px 20px; }
  .brand-home .path-row { flex-wrap: wrap; justify-content: flex-start; gap: 10px 24px; padding: 18px 0; }
  .brand-home .path-row > span:first-child { flex-basis: 100%; font-size: 12px; }
  .brand-home .path-row a { font-size: 11px; }
  .brand-home .sales-section, .brand-home .program-section, .brand-home .format-section { padding: 60px 0; }
  .brand-home .section-heading, .parent-grid, .thinking-grid, .practice-layout, .program-outcomes { grid-template-columns: 1fr; gap: 28px; }
  .brand-home .section-heading { margin-bottom: 30px; }
  .brand-home :is(.sales-section, .program-section, .format-section) h2 { font-size: clamp(24px, 5.5vw, 30px); }
  .brand-home .section-kicker { margin-bottom: 14px; font-size: 9px; }
  .brand-home .sales-lead { font-size: 14px; }
  .workbench-toolbar { padding: 16px; }
  .workbench-main { padding: 16px; }
  .image-pair { gap: 14px; }
  .image-pair figcaption { gap: 5px; font-size: 10px; }
  .showcase-placeholder { padding: 8px; font-size: 12px; }
  .showcase-placeholder span { font-size: 10px; }
  .workbench-code { padding: 14px; }
  .workbench-code pre { font-size: 10px; }
  .example-action { display: grid; gap: 12px; }
  .example-action .btn { width: 100%; }
  .showcase-status { min-height: 6em; }
  .workbench-note { padding: 14px 16px; font-size: 10px; }
  .result-takeaway p { font-size: 13px; }
  .program-blocks { grid-template-columns: 1fr; gap: 18px; }
  .program-blocks article { padding: 26px; }
  .program-outcomes { margin-top: 32px; }
  .program-outcomes h3 { max-width: none; font-size: 18px; }
  .practice-window { padding: 22px; }
  .brand-home .questions-section { padding-top: 0; }
  .questions-list { grid-template-columns: 1fr; }
  .questions-list dt { font-size: 16px; }
  .brand-home .purchase-section { padding-bottom: 48px; }
  .brand-home .app-card { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  .brand-home .app-card img { width: 40px; height: 40px; }
  .purchase-actions, .brand-home .app-card .btn { grid-column: auto; }
  .purchase-actions { width: 100%; justify-items: stretch; text-align: center; }
  .brand-home .footer-legal { gap: 10px 18px; }
}
@media (max-width: 380px) {
  .brand-home .wrap { width: calc(100% - 28px); }
  .brand-home .hero-actions .btn { width: 100%; }
  .brand-home .hero-copy h1 { font-size: 26px; }
  .example-options { gap: 3px; }
  .example-options button { padding: 8px 6px; font-size: 11px; }
  .image-pair { grid-template-columns: 1fr; }
}