@import url("/visual-system.css");

/* Abecator typography system — August 2026
   A calm technical hierarchy for engineering content. Loaded last in production. */
:root{
  --font-sans:Inter,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,ui-sans-serif,sans-serif;
  --font-mono:"Cascadia Mono",SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-md:1.0625rem;
  --text-lg:1.125rem;
  --text-xl:1.25rem;
  --heading-3:1.35rem;
  --heading-2:clamp(2rem,3.6vw,3.35rem);
  --heading-1:clamp(2.9rem,5.2vw,4.9rem);
}

html{font-size:16px}
body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  font-weight:400;
  line-height:1.7;
  letter-spacing:-.003em;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-sans);
  font-weight:700;
  letter-spacing:-.028em;
}
h1{line-height:1.03}
h2{font-size:var(--heading-2);line-height:1.08;letter-spacing:-.035em}
h3{line-height:1.22}
p{line-height:1.72}
small{font-size:.8125rem}

/* Hero hierarchy: strong, but not billboard-sized. */
.hero h1{
  font-size:var(--heading-1);
  line-height:1.02;
  letter-spacing:-.043em;
  font-weight:700;
}
.subpage-hero h1{
  font-size:clamp(2.75rem,5vw,4.55rem);
  line-height:1.03;
  letter-spacing:-.04em;
  font-weight:700;
}
.hero-lead,.subpage-hero .lead{
  font-size:var(--text-lg);
  line-height:1.68;
  letter-spacing:0;
}

/* Section headings and long-form explanatory copy. */
.page-head h2,
.visual-showcase-head h2,
.method-section .consulting-copy h2,
.training-access-grid h2,
.free-learning-bar h2,
.consulting-intake-grid>div>h2,
.contact-details-panel h2,
.callout-panel h2{
  font-size:var(--heading-2);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:700;
}
.page-head p,
.intro-copy p,
.section-sidecopy,
.visual-showcase-head p,
.consulting-intake-grid>div>p,
.free-learning-bar p{
  font-size:var(--text-base);
  line-height:1.75;
  letter-spacing:0;
}

/* Technical labels stay compact, but remain comfortably readable. */
.eyebrow,.section-kicker,
.card-code,.audience-tag,.tool-code,.tool-status,.status-pill,
.application-code,.route-number,.route-copy small,.path-stage small,
.specialist-card>span,.start-card-label,.workspace-badge,
.hub-path span,.hub-feature small,.assistant-label,.case-context-label,
.home-jump-label,.consulting-jump-label,.training-jump-wrap>span{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:800;
  letter-spacing:.09em;
}
.eyebrow,.section-kicker{letter-spacing:.12em}

/* Navigation: readable on the dark header, without feeling heavy. */
.site-header .nav>a,.nav-more>summary{
  color:#c6d5e8;
  font-size:var(--text-sm);
  font-weight:600;
  letter-spacing:0;
}
.site-header .nav>a:hover,.nav-more>summary:hover{color:#fff}
.site-header .nav>a[aria-current="page"],.nav-more.is-current>summary{color:#65d9f0}
.nav-more-menu a{
  color:#334158;
  font-size:var(--text-sm);
  font-weight:600;
}
.nav-cta,.button{
  font-size:.9375rem;
  font-weight:700;
  letter-spacing:0;
}
.home-jump a,.consulting-jump a,.training-jump-wrap a{
  font-size:.8125rem;
  font-weight:650;
}

/* Cards and decision surfaces. */
.audience-card h3,.tool-card h3,.info-card h3,
.priority-service h3,.resource-gateway-card strong,
.consulting-need-card h3,.specialist-card h3{
  font-size:var(--heading-3);
  line-height:1.24;
  font-weight:700;
  letter-spacing:-.022em;
}
.training-start-card strong{font-size:1.35rem;font-weight:700}
.route-copy strong,.application-row h3,.path-stage h3,.deliverable-grid h3,
.intake-card h3,.compact-course-grid strong,.list-row h3,.process-step h3{
  font-weight:700;
  letter-spacing:-.014em;
}
.route-copy strong,.application-row h3,.list-row h3,.process-step h3{font-size:1.0625rem}
.path-stage h3{font-size:1.1875rem}

.audience-card p,.tool-card p,.info-card p,
.priority-service p,.resource-gateway-card p,
.consulting-need-card p,.application-row p,.deliverable-grid p,
.process-step p,.training-route p,.path-stage p,.specialist-card p,
.hub-path p,.hub-feature p,.chat-message p,.workspace-side p{
  font-size:.9375rem;
  line-height:1.68;
  letter-spacing:0;
}
.training-start-card p,.path-note,.notice{font-size:.9375rem;line-height:1.65}

/* Featured cards use the dark authority surface from the visual system. */
.featured-card h3,.featured-card>a{color:#fff}
.featured-card p{color:#a8bbd0}
.featured-card .audience-tag{color:#6ee7f1}

/* Tags, metadata and actions should not drop into 9–11 px territory. */
.hero-proof span,.consulting-proof span,
.priority-tags span,.need-links a,.card-tags span,.tool-meta span,
.start-card-sequence span,.category-strip a,.category-strip span,
.blog-label,.ready,.development,.context-chip,.diagnostic-upload>span,
.file-chip,.feedback-buttons button{
  font-size:.75rem;
  line-height:1.35;
}
.audience-card a,.tool-link,.card-action,.need-action,
.secondary-service-line a,.specialist-card b,.path-stage>b,
.compact-course-grid b,.course-directory b,.hub-feature b{
  font-size:.875rem;
  font-weight:700;
}

/* Training catalogue readability. */
.training-route{line-height:1.55}
.route-copy p,.path-stage p,.specialist-card p{font-size:.9375rem}
.compact-course-grid small{font-size:.8125rem;line-height:1.5}
.course-directory>a{font-size:.875rem;line-height:1.45}
.course-directory strong{font-size:.9375rem;font-weight:700}
.directory-head{font-size:.75rem}
.access-actions small{font-size:.8125rem;line-height:1.55}

/* AI assistant: keep controls compact, but remove tiny interface text. */
.mode-button b{font-size:.9rem;font-weight:700}
.mode-button span{font-size:.78rem;line-height:1.45}
.assistant-topbar small{font-size:.72rem}
.assistant-topbar strong{font-size:.9375rem}
.prompt-chip{font-size:.8125rem}
.assistant-form label{font-size:.8125rem}
.input-note{font-size:.75rem;line-height:1.5}
.chat-message b{font-size:.8125rem}
.chat-message small{font-size:.75rem;line-height:1.45}
.ai-sources h4{font-size:.75rem}
.ai-sources a,.diagnostic-evidence li{font-size:.8125rem}
.answer-feedback>strong{font-size:.75rem}
.answer-feedback label,.answer-feedback>[data-feedback-status]{font-size:.75rem}

/* Tool Hub: search and filters are primary navigation, not microcopy. */
.hub-filter{font-size:.875rem;font-weight:650}
.hub-result-count{font-size:.875rem}
.hub-principle span{font-size:.875rem;line-height:1.55}
.hub-path h3{font-size:1.1875rem}
.hub-path p,.hub-feature p{font-size:.9375rem}
.hub-feature h3{font-size:1.25rem}
.hub-backtop{font-size:.8125rem}

/* Knowledge / blog reading typography. */
.article-content{
  font-size:var(--text-base);
  line-height:1.8;
}
.article-content p,.article-content li{
  font-size:var(--text-base);
  line-height:1.8;
}
.article-content h2{
  margin-top:2.2em;
  font-size:clamp(1.75rem,3vw,2.5rem);
  line-height:1.15;
}
.article-content h3{
  margin-top:1.8em;
  font-size:1.35rem;
  line-height:1.25;
}
.article-content code,.article-content pre{font-family:var(--font-mono)}

/* Footer should be secondary, not miniature. */
.footer-brand p,.footer-nav-unified a,.footer-column,.footer-contact-line a{
  font-size:.875rem;
  line-height:1.55;
}
.footer-column strong{font-size:.8125rem;font-weight:700}
.footer-bottom{font-size:.75rem;line-height:1.5}

@media(max-width:1120px){
  .site-header .nav>a,.nav-more>summary{font-size:.8125rem}
}

@media(max-width:760px){
  .hero h1{font-size:clamp(2.65rem,12vw,3.75rem);line-height:1.04}
  .subpage-hero h1{font-size:clamp(2.45rem,11vw,3.55rem);line-height:1.05}
  .hero-lead,.subpage-hero .lead{font-size:1.0625rem;line-height:1.65}
  .page-head h2,
  .visual-showcase-head h2,
  .method-section .consulting-copy h2,
  .training-access-grid h2,
  .free-learning-bar h2,
  .consulting-intake-grid>div>h2,
  .contact-details-panel h2,
  .callout-panel h2{font-size:clamp(1.85rem,8vw,2.65rem)}
  .site-header .nav>a,.nav-more>summary{font-size:.8rem;line-height:1.25}
  .site-header .nav .nav-more-menu a{font-size:.8125rem}
  .nav-cta{font-size:.8125rem}
  .home-jump a,.consulting-jump a,.training-jump-wrap a{font-size:.8rem}
  .audience-card h3,.tool-card h3,.info-card h3,
  .priority-service h3,.resource-gateway-card strong,
  .consulting-need-card h3,.specialist-card h3{font-size:1.25rem}
}

/* Responsive QA hardening: navigation contrast, sticky secondary navigation and anchor clearance. */
.nav-more>summary:after{color:currentColor;opacity:.72}
.footer-nav-unified a,.footer-column a{color:#aebdd0}
.footer-contact-line a{color:#8fa5bd}
.footer-nav-unified a:hover,.footer-column a:hover,.footer-contact-line a:hover{color:#fff}

.training-jumpbar,.consulting-jump-section,.ai-page-jump{top:76px}
.consulting-page section[id],
.training-hub-page section[id],
.ai-page section[id],
.ai-page #assistant{scroll-margin-top:150px}

@media(max-width:1040px){
  .training-jumpbar,.consulting-jump-section,.ai-page-jump{top:132px}
  .consulting-page section[id],
  .training-hub-page section[id],
  .ai-page section[id],
  .ai-page #assistant{scroll-margin-top:200px}
}

@media(max-width:760px){
  .site-header .nav>a,.nav-more>summary{
    color:#d6e4f3;
    background:rgba(255,255,255,.055);
  }
  .site-header .nav>a:hover,.nav-more>summary:hover{
    color:#fff;
    background:rgba(46,213,230,.10);
  }
  .site-header .nav>a[aria-current="page"],.nav-more.is-current>summary{
    color:#65d9f0;
    background:rgba(46,213,230,.12);
  }
  .training-jumpbar,.consulting-jump-section,.ai-page-jump{top:160px}
  .consulting-page section[id],
  .training-hub-page section[id],
  .ai-page section[id],
  .ai-page #assistant{scroll-margin-top:225px}
}