/* SpeechTiles Website v2.0 | v0.3 topic-page alignment.
   Load AFTER education.css and education-brand.css.
   Only six pages opt in via .education-brand.education-topic.
   No modifications to the approved Overview, global website, or Developer Portal. */
/* Reuse the Overview's dark navy hero / light content system, including the
   hero-specific breadcrumb and annotation contrast. */
.education.education-brand.education-topic .hero.compact {
  padding: clamp(68px,6.5vw,94px) 0 clamp(68px,7vw,96px);
}
.education.education-brand.education-topic .hero .breadcrumb {
  color: #bbcee4;
  font-size: 13px;
  margin-bottom: 17px;
}
.education.education-brand.education-topic .hero .breadcrumb a {
  color: #a9d8ff;
  text-underline-offset: 3px;
}
.education.education-brand.education-topic .hero .note {
  color: #c2d5e9;
}
.education.education-brand.education-topic .hero.compact h1 {
  font-size: clamp(2.4rem,4.35vw,4.1rem);
  letter-spacing: -.035em;
}
.education.education-brand.education-topic .hero .button {
  font-weight: 750;
}
/* Keep foreground colors and borders readable on white and pale-blue sections. */
.education.education-brand.education-topic .numbered li,
.education.education-brand.education-topic .howstep,
.education.education-brand.education-topic .layer,
.education.education-brand.education-topic .scenario,
.education.education-brand.education-topic .faq details,
.education.education-brand.education-topic .onboarding-steps li,
.education.education-brand.education-topic .license-stage {
  background: #fff;
  border-color: #d9e5f4;
  color: #10213c;
  box-shadow: 0 8px 25px rgba(23,53,87,.028);
}
.education.education-brand.education-topic .numbered li {
  border-radius: 11px;
}
.education.education-brand.education-topic .numbered li::before {
  color: #0867df;
}
.education.education-brand.education-topic .numbered li strong {
  color: #10213c;
}
.education.education-brand.education-topic .numbered li span {
  color: #536780;
}
/* Brand-native diagrams, process steps, and layered responsibility models. */
.education.education-brand.education-topic .layer {
  border-radius: 12px;
}
.education.education-brand.education-topic .layer.feature {
  border: 1px solid #aecdf3;
  background: linear-gradient(145deg,#eaf4ff,#f6fbff);
}
.education.education-brand.education-topic .layer p,
.education.education-brand.education-topic .layer small {
  color: #536780;
}
.education.education-brand.education-topic .layer small {
  border-top-color: #d4e2f0;
}
.education.education-brand.education-topic .layer .step {
  color: #075fce;
}
.education.education-brand.education-topic .howstep {
  background: #fff;
  border-color: #d9e5f4;
}
.education.education-brand.education-topic .howstep b {
  color: #0867df;
}
.education.education-brand.education-topic .howstep strong {
  color: #10213c;
}
.education.education-brand.education-topic .howstep p {
  color: #536780;
}
.education.education-brand.education-topic .howstep+.howstep {
  border-left-color: #d9e5f4;
}
.education.education-brand.education-topic .fit .card:first-child {
  background: linear-gradient(145deg,#eaf4ff,#f8fbff);
  border-color: #b8d1f0;
}
.education.education-brand.education-topic .fit li,
.education.education-brand.education-topic .list li {
  color: #536780;
}
.education.education-brand.education-topic .fit li::marker,
.education.education-brand.education-topic .list li::marker {
  color: #0867df;
}
/* Business Value: iceberg illustration stays visually distinctive but becomes
   a softly tinted component instead of an unrelated dark playground. */
.education.education-brand.education-topic .iceberg-intro {
  background: linear-gradient(145deg,#e5f2ff,#f4f9ff);
  border: 1px solid #b6d2f2;
  border-radius: 12px;
}
.education.education-brand.education-topic .iceberg-intro p {
  color: #536780;
}
.education.education-brand.education-topic .iceberg-rule {
  background: #0867ec;
  box-shadow: none;
}
.education.education-brand.education-topic .iceberg-bottom {
  background: #dcecff;
  border-color: #b1d0f5;
  color: #164e8c;
}
.education.education-brand.education-topic .build-proof {
  background: linear-gradient(115deg,#eaf4ff,#f7fbff);
  border: 1px solid #c8dff7;
  border-radius: 12px;
}
.education.education-brand.education-topic .build-proof h3 {
  color: #10213c;
}
.education.education-brand.education-topic .build-proof p {
  color: #536780;
}
.education.education-brand.education-topic .build-preview-list {
  background: #fff;
  border-color: #d9e5f4;
}
.education.education-brand.education-topic .build-preview-list>span {
  color: #10213c;
}
.education.education-brand.education-topic .build-preview-payoff {
  background: #eaf4ff;
  border-color: #b6d2f2;
}
.education.education-brand.education-topic .build-preview-payoff h3 {
  color: #10213c;
}
.education.education-brand.education-topic .build-preview-payoff p {
  color: #536780;
}
/* Comparisons require contrast between the responsibility and solution columns;
   the positive column is pale blue rather than teal-black. */
.education.education-brand.education-topic .compare {
  border-color: #cbdced;
  border-radius: 12px;
}
.education.education-brand.education-topic .compare th {
  background: #173b67;
  color: #fff;
}
.education.education-brand.education-topic .compare td,
.education.education-brand.education-topic .compare th {
  border-bottom-color: #d9e5f4;
}
.education.education-brand.education-topic .compare td {
  background: #fff;
  color: #536780;
}
.education.education-brand.education-topic .compare td:first-child {
  background: #f2f7fc;
  color: #10213c;
}
.education.education-brand.education-topic .compare td:nth-child(3) {
  background: #eaf4ff;
  color: #355779;
}
/* Scenario dialogues: two neutral shades distinguish app/user turns without
   losing the explanatory role labels. */
.education.education-brand.education-topic .scenario {
  border-radius: 12px;
}
.education.education-brand.education-topic .scenario .scenario-head {
  background: #eaf4ff;
  border-bottom-color: #cbdff5;
}
.education.education-brand.education-topic .scenario-head p {
  color: #536780;
}
.education.education-brand.education-topic .bubble {
  background: #f3f7fc;
  border-color: #d9e5f4;
  color: #10213c;
}
.education.education-brand.education-topic .bubble.user {
  background: #e4f1ff;
  border-color: #b1d4f6;
}
.education.education-brand.education-topic .bubble small {
  color: #0867df;
}
.education.education-brand.education-topic .responsibilities {
  background: #f7faff;
  border-color: #cfdfef;
  color: #10213c;
}
.education.education-brand.education-topic .responsibilities dt {
  color: #075fce;
}
.education.education-brand.education-topic .responsibilities dd {
  color: #536780;
}
/* Performance/privacy illustrations and evidence cautions. */
.education.education-brand.education-topic .boundary-main {
  background: linear-gradient(135deg,#e8f3ff,#f6faff);
  border: 1px solid #b8d3f1;
  color: #10213c;
  border-radius: 12px;
}
.education.education-brand.education-topic .boundary-main p {
  color: #536780;
}
.education.education-brand.education-topic .runtime-inline b {
  background: #fff;
  border-color: #b5d3f1;
  color: #10213c;
}
.education.education-brand.education-topic .runtime-inline span {
  color: #075fce;
}
.education.education-brand.education-topic .proof-note {
  background: #fff7e8;
  border-left: 4px solid #bd790c;
  border-radius: 0 10px 10px 0;
}
.education.education-brand.education-topic .proof-note b {
  color: #835005;
}
.education.education-brand.education-topic .proof-note p {
  color: #5c554b;
}
/* Evaluation/licensing: retain the original distinctions among stages without
   suggesting invented pricing, entitlements or approvals. */
.education.education-brand.education-topic .license-stage {
  border-radius: 12px;
}
.education.education-brand.education-topic .license-stage:first-child {
  background: linear-gradient(145deg,#eaf4ff,#f9fcff);
  border-color: #b5d3f1;
}
.education.education-brand.education-topic .license-stage-featured {
  background: linear-gradient(145deg,#eaf4ff,#f9fcff);
  border-color: #8db9ed;
}
.education.education-brand.education-topic .license-stage .marker {
  background: #e5f2ff;
  color: #075fce;
}
.education.education-brand.education-topic .license-stage .stage-status {
  color: #497294;
}
.education.education-brand.education-topic .license-stage h3 {
  color: #10213c;
}
.education.education-brand.education-topic .license-stage p,
.education.education-brand.education-topic .license-stage li {
  color: #536780;
}
.education.education-brand.education-topic .license-stage li::marker {
  color: #075fce;
}
.education.education-brand.education-topic .license-stage .stage-foot {
  border-top-color: #d9e5f4;
  color: #536780;
}
.education.education-brand.education-topic .license-stage .stage-metric {
  color: #075fce;
}
.education.education-brand.education-topic .license-stage .stage-metric span {
  color: #536780;
}
.education.education-brand.education-topic .onboarding-steps li {
  border-radius: 12px;
}
.education.education-brand.education-topic .onboarding-steps li::before {
  color: #075fce;
}
.education.education-brand.education-topic .onboarding-steps span {
  color: #536780;
}
/* Accordion text and disclosure glyph inherit the new dark foreground. */
.education.education-brand.education-topic .faq details {
  border-radius: 12px;
}
.education.education-brand.education-topic .faq details p {
  color: #536780;
}
.education.education-brand.education-topic .faq summary {
  color: #10213c;
}
/* Overview's dark banners remain dark on topic pages as deliberate CTA anchors,
   with explicit high-contrast copy, including section-level heading overrides. */
.education.education-brand.education-topic .section .banner {
  background: linear-gradient(120deg,#0a2444,#10396c);
  border-color: #416fa0;
  border-radius: 14px;
}
.education.education-brand.education-topic .section .banner h2 {
  color: #fff;
}
.education.education-brand.education-topic .section .banner p {
  color: #d4e3f3;
}
.education.education-brand.education-topic .section .banner .button {
  color: #fff;
}
@media(max-width:650px) {
  .education.education-brand.education-topic .hero.compact {
    padding: 60px 0 65px;
  }
  .education.education-brand.education-topic .hero.compact h1 {
    font-size: clamp(2.2rem,8.8vw,3.25rem);
  }
  .education.education-brand.education-topic .iceberg-intro {
    padding: 22px;
  }
  .education.education-brand.education-topic .build-proof {
    padding: 22px;
  }
  .education.education-brand.education-topic .compare td,
 .education.education-brand.education-topic .compare th {
    padding: 14px 15px;
  }
}