/* A shared reading scale for C4 public pages, demo views and connected workspaces.
   Loaded last so older compact component styles no longer make essential copy tiny. */
:root {
  --read-body: 1rem;
  --read-copy: clamp(1rem, .94rem + .14vw, 1.0625rem);
  --read-control: .9375rem;
  --read-meta: .875rem;
  --read-badge: .8125rem;
}

body {
  font-size: var(--read-body);
  line-height: 1.65;
}

/* Keep the established headline scale. Enlarge the text people need to read. */
:root #main p,
:root #dialog-body p,
:root .dialog-list,
:root .feature-list {
  font-size: var(--read-copy);
  line-height: 1.75;
}
:root #main .lead { font-size: 1.125rem; }
:root #main :is(p, li, dd),
:root #dialog-body :is(p, li, dd) {
  overflow-wrap: break-word;
}
:root .feature-list > span { align-items: flex-start; }
:root .feature-list .icon { margin-top: .28em; }
:root :is(.eyebrow, .hero .eyebrow, .app-top .eyebrow) {
  font-size: .8125rem;
  line-height: 1.55;
  letter-spacing: .11em;
}
:root .eyebrow { min-width: 0; }
:root .eyebrow::before { flex-shrink: 0; }

/* A full-size navigation row fits wide screens; the menu takes over before it
   would need cramped type, wrapped labels or a second row of header controls. */
:root .site-header .nav-wrap {
  width: min(1440px, calc(100% - 64px));
  gap: clamp(14px, 1.4vw, 24px);
}
:root .site-header .nav-links {
  min-width: 0;
  gap: clamp(16px, 1.5vw, 24px);
}
:root .site-header .nav-links > a,
:root .site-header .nav-drop > button {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow-wrap: normal;
}
:root .site-header .nav-links > a:is(:hover, .active),
:root .site-header .nav-drop > button:is(:hover, [aria-expanded="true"]) {
  color: var(--brand-hover);
}
:root .site-header .nav-actions {
  gap: 10px;
  flex-shrink: 0;
}
:root .site-header .nav-actions > .btn { font-size: var(--read-control); }
:root .site-header .dropdown a {
  font-size: var(--read-control);
  line-height: 1.5;
}
:root .language-trigger { font-size: var(--read-badge); }
:root .brand-copy {
  font-size: .875rem;
  line-height: 1.3;
}
:root .brand-copy small {
  font-size: .6875rem;
  line-height: 1.4;
  letter-spacing: .09em;
}

/* Buttons and form controls remain comfortable to read at desktop and phone
   sizes. The 16px native-control floor also avoids iOS focus zoom. */
:root :is(.btn, .btn-morph, .btn-small, .text-link) {
  font-size: var(--read-control);
  line-height: 1.5;
}
:root :is(.field > label, .field > span, .portal-field > label,
  .configuration-row label, .checkbox-label, .role-option, .interest-option,
  .checkin, .portal-role-label) {
  font-size: var(--read-control);
  line-height: 1.6;
}
:root :is(.input, input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-width: 0;
  font-size: var(--read-body);
  line-height: 1.5;
}
:root :is(input, textarea)::placeholder { opacity: 1; }
:root :is(.badge, .tag-row .badge, .mini-tag, .portal-badge) {
  font-size: var(--read-badge);
  line-height: 1.5;
  letter-spacing: .025em;
}
:root .pillar-card .pillar-label {
  font-size: .875rem;
  line-height: 1.5;
  letter-spacing: .025em;
}
:root .pillar-card .card-footer { font-size: var(--read-control); }
:root .faq-list summary { font-size: 1.0625rem; line-height: 1.5; }

/* Secondary information remains secondary through color and spacing, not tiny
   lettering. This covers component-specific mobile reductions as well. */
:root :is(.fine, .opportunity-meta, .breadcrumb, .step-no, .foundation-strip,
  .foundation-definition, .foundation-title, .foundation-items,
  .hero-caption, .pillar-note, .preview-banner, .preview-banner a,
  .preview-banner button, .app-stat span, .profile-fields dt,
  .app-list-item small, .session-date, .contact-required, .contact-error,
  .contact-delivery-note, .contact-status, .demo-account-entry,
  .demo-account-prompt, .language-status, .language-option > span:not(.language-check),
  .sidebar-tooltip, .passport-current-page, .portal-help, .portal-required,
  .portal-field-error, .portal-form-status) {
  font-size: var(--read-meta);
  line-height: 1.6;
}
:root #main :is(p.fine, p.contact-privacy, p.contact-required, p.contact-error,
  p.contact-status, p.demo-account-prompt, p.portal-help, p.portal-form-status,
  p.portal-field-error, .portal-help p) {
  font-size: var(--read-meta);
  line-height: 1.65;
}
:root :is(.info-strip, .portal-notice, .portal-form-error) {
  font-size: .9375rem;
  line-height: 1.7;
}
:root .hero-note small { font-size: .75rem; line-height: 1.5; letter-spacing: .09em; }
:root .hero-note strong { font-size: 1rem; line-height: 1.5; }
:root .hero-note > div { min-width: 0; }
:root :is(.floating-proof strong, .floating-proof small, .proof-three) {
  font-size: var(--read-meta);
  line-height: 1.5;
}
:root :is(.course-card .card-bottom, .card-bottom > small) {
  font-size: var(--read-meta);
  line-height: 1.6;
}
:root :is(.app-list-item strong, .app-tile h3, .credential h3) {
  font-size: 1rem;
  line-height: 1.5;
}
:root .profile-fields dd { font-size: 1rem; line-height: 1.6; }
:root .profile-fields > div { min-width: 0; }
:root :is(.app-sidebar .sidebar-nav a, .portal-sidebar nav a,
  .portal-mobile-menu nav a, .passport-mobilebar button) {
  font-size: var(--read-control);
  line-height: 1.5;
}
:root .app-identity strong { font-size: var(--read-control); }
:root :is(.app-identity small, .sidebar-profile-menu :is(a, button, p)) {
  font-size: var(--read-meta);
  line-height: 1.5;
}
:root :is(.app-sidebar .app-sidebar-title, .portal-nav-group > span) {
  font-size: .75rem;
  line-height: 1.55;
  letter-spacing: .08em;
}
:root #main table { font-size: var(--read-control); line-height: 1.6; }
:root #main th { font-size: var(--read-meta); line-height: 1.5; }
:root .c4-people-source { font-size: var(--read-control); line-height: 1.5; }

/* Existing demo templates use some inline or !important compact sizes. Limit
   the override to their semantic text/control surfaces, never photographs,
   headline transforms, status visibility or the 3D objects. */
:root #main p[style*="font-size"],
:root #dialog-body p[style*="font-size"] {
  font-size: var(--read-copy) !important;
}
:root :is(.btn, .text-link)[style*="font-size"],
:root :is(.btn[data-curation-action], .app-section-title .text-link,
  .table-wrap .text-link) {
  font-size: var(--read-control) !important;
}
:root :is(.role-switch, .configuration-row input, .configuration-row select) {
  font-size: var(--read-body) !important;
}
:root #main :is(span, small, strong):is([style*="font-size:9px"],
  [style*="font-size:10px"], [style*="font-size:11px"],
  [style*="font-size:12px"], [style*="font-size:13px"]) {
  font-size: var(--read-meta) !important;
  line-height: 1.6;
}

/* The miniature Passport is a physical object with its own scrolling pages.
   Raise its reading floor while preserving its cover, dimensions and opening. */
:root #main .c4-book .c4-book-page-body :is(p, li, dd, h4),
:root .c4-book :is(.c4-book-page-link, .c4-book-control,
  .c4-book-pagination, .c4-book-reset, .c4-book-count > span) {
  font-size: var(--read-meta);
  line-height: 1.6;
}
:root #main .c4-book .c4-book-page-body dt,
:root .c4-book :is(.c4-book-page-head, .c4-book-page-foot, .c4-book-tag) {
  font-size: .75rem;
  line-height: 1.5;
}
:root .c4-book-hint { font-size: var(--read-meta) !important; }
:root #main .passport-photo-editor .fine { font-size: var(--read-meta); }
:root .passport-photo-editor .checkbox-label { font-size: var(--read-control); }
:root .passport-photo-editor input[type="file"] { font-size: var(--read-body); }

/* Footer and assistant messages use the same reading hierarchy. The compact
   floating assistant mark itself keeps its existing size and placement. */
:root :is(.footer-column h3, .footer-column a, .footer-column button) {
  font-size: var(--read-control);
  line-height: 1.6;
}
:root .footer-brand p { font-size: var(--read-control); line-height: 1.8; }
:root .footer-bottom,
:root .footer-bottom > span:first-child { font-size: var(--read-meta); line-height: 1.6; }
:root .footer-column { min-width: 0; overflow-wrap: break-word; }
:root .footer-bottom { flex-wrap: wrap; }
:root .toast { font-size: var(--read-control); }
:root .c4ai-message p { font-size: var(--read-body); line-height: 1.75; }
:root :is(.c4ai-answer-link, .c4ai-prompts button, .c4ai-control-actions button) {
  font-size: var(--read-meta);
  line-height: 1.5;
}
:root :is(.c4ai-message-author, .c4ai-preview-note, .c4ai-control-row,
  .c4ai-settings .c4ai-control-help, .c4ai-composer > p,
  .c4ai-header-copy > span, .c4ai-panel.c4ai-tight .c4ai-header-copy > span) {
  font-size: .75rem;
  line-height: 1.55;
}

@media (max-width: 1199px) {
  :root .site-header .nav-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px 44px;
    column-gap: 8px;
    row-gap: 0;
    height: auto;
    min-height: 78px;
    padding-block: 10px;
    align-items: center;
  }
  :root .site-header .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    width: max-content;
    max-width: 100%;
  }
  :root .site-header .brand-copy { display: grid; }
  :root .site-header .nav-actions { display: contents; }
  :root .site-header .nav-actions > .language-trigger { grid-column: 2; grid-row: 1; min-width: 44px; }
  :root .site-header .nav-actions > .theme-toggle { grid-column: 3; grid-row: 1; }
  :root .site-header .nav-actions > .mobile-toggle { display: inline-grid; grid-column: 4; grid-row: 1; }
  :root .site-header .nav-actions > .btn { display: none; }
  :root .site-header .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    align-items: stretch;
    max-height: calc(100dvh - 78px);
    overflow-y: auto;
    padding: 20px 32px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--shadow);
  }
  :root .site-header.menu-open .nav-links { display: grid; gap: 4px; }
  :root .site-header .nav-links > a,
  :root .site-header .nav-drop > button {
    width: 100%;
    min-height: 48px;
    justify-content: space-between;
    padding: 12px;
    white-space: normal;
    border-radius: 12px;
  }
  :root .site-header .nav-links > a::after { display: none; }
  :root .site-header .nav-links > .nav-passport-link { display: inline-flex; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; }
  :root .site-header .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    margin: 6px 0 12px;
    border-color: transparent;
    box-shadow: none;
    background: var(--surface);
  }
  :root .site-header .nav-drop.open .dropdown { display: block; }
  :root .site-header .nav-links > a:is(:hover, .active),
  :root .site-header .nav-drop > button:is(:hover, [aria-expanded="true"]) { background: var(--tint); }
}
@media (max-width: 700px) {
  :root .site-header .nav-wrap { width: calc(100% - 40px); min-height: 72px; }
  :root .site-header .brand-copy { display: none; }
  :root .site-header .nav-links { max-height: calc(100dvh - 72px); padding-inline: 20px; }
  :root .hero-note { gap: 12px; }
  :root .hero-note .circle-arrow { margin-inline-start: auto; }
  :root .foundation-strip .foundation-items { display: flex; flex-wrap: wrap; gap: 14px 20px; justify-content: flex-start; }
  :root .foundation-items > span { flex: 1 1 130px; min-width: 0; }
  :root :is(.card-bottom, .form-actions) { flex-wrap: wrap; }
  :root .app-list-item { flex-wrap: wrap; }
  :root .app-list-item > div:not(.session-date) { flex-basis: 160px; }
  :root .role-options { grid-template-columns: minmax(0, 1fr); }
  :root .footer-grid { gap: 28px 20px; }
}

/* Explain the C4 name at the point of entry, with a concise AI attribution. */
:root .brand-copy{max-width:250px;gap:4px;letter-spacing:0;text-transform:none}
:root .brand-name{font-size:14px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
:root .brand-copy small{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
:root .site-header .brand{gap:12px}
@media(min-width:1361px) and (max-width:1550px){
 :root .site-header .brand-copy{max-width:226px}
 :root .site-header .nav-links{gap:16px}
 :root .site-header .nav-wrap{gap:16px}
 :root .site-header .nav-actions>.btn{padding-inline:18px}
}
.hero-eyebrow-mobile-name{display:none}
@media(max-width:700px){
 :root .site-header .brand{flex-direction:row;align-items:center;gap:0;max-width:100%;width:max-content}
 :root .site-header .brand-copy{display:none}
 :root .site-header .nav-wrap{min-height:72px;align-items:center;padding-block:10px}
 :root .site-header .nav-actions>:is(.language-trigger,.theme-toggle,.mobile-toggle){align-self:center;margin-top:0}
 :root .site-header .nav-links{max-height:calc(100dvh - 72px)}
 .hero-eyebrow-default{display:none}
 .hero-eyebrow-mobile-name{display:block}
}

.c4-ai-feature{display:grid;grid-template-columns:90px minmax(0,1fr) auto;align-items:center;gap:28px;padding:30px 32px;margin-top:36px;margin-bottom:20px;border:1px solid var(--line);border-radius:24px;background:var(--tint)}
.c4-ai-feature .eyebrow{margin-bottom:10px}
.c4-ai-feature h2{font-size:clamp(24px,2.2vw,32px);line-height:1.25;letter-spacing:-.035em}
.c4-ai-feature p{margin-top:12px;max-width:65ch}
.c4-ai-feature-art{width:90px;height:90px;display:grid;place-items:center;background:#0b3447;border-radius:24px;color:#f7a89d}
.c4-ai-feature-art svg{width:62px;height:62px;max-width:100%;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.c4-ai-feature>.btn{white-space:nowrap}
@media(max-width:900px){.c4-ai-feature{grid-template-columns:70px minmax(0,1fr);gap:20px;padding:26px}.c4-ai-feature-art{width:70px;height:70px;border-radius:18px}.c4-ai-feature-art svg{width:50px;height:50px}.c4-ai-feature>.btn{grid-column:2;justify-self:start}}
@media(max-width:550px){.c4-ai-feature{grid-template-columns:minmax(0,1fr);gap:22px;padding:24px;margin-top:28px}.c4-ai-feature>.btn{grid-column:1;white-space:normal}.c4-ai-feature h2{font-size:26px}}

/* Keep the small AI signature with the logo without repeating the full C4 name. */
:root .brand-mobile-ai { display: none; }
:root .brand-copy small { font-size:12px; text-transform: none; letter-spacing: .025em; font-weight: 600; color: var(--brand-hover); }
:root .site-header.passport-header .nav-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  height: auto;
  padding-block: 10px;
}
:root .site-header.passport-header .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: max-content;
  flex-shrink: 0;
}
:root .site-header.passport-header .brand-copy { display: none; }
:root .site-header.passport-header .brand-mark.c4-logo { width: 64px; height: 46px; }
:root .site-header.passport-header .brand-mobile-ai {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--brand-hover);
}
:root .site-header.passport-header .nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
:root .workspace-public-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-inline-start: auto;
  padding: 8px;
  border-radius: 10px;
  color: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}
:root .workspace-public-return .icon { width: 18px; height: 18px; flex-shrink: 0; transform: rotate(180deg); }
:root .workspace-public-return:hover { background: var(--tint); color: var(--brand-hover); }
:root .workspace-public-return:focus-visible { outline: 2px solid var(--brand-hover); outline-offset: 2px; }
@media(max-width:700px) {
  :root .site-header .brand { flex-direction: column; gap: 2px; align-items: center; }
  :root .site-header .brand-mobile-ai {
    display: block;
    color: var(--brand-hover);
    font-size: 12px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
  }
  :root .site-header .nav-wrap { min-height: 84px; }
  :root .site-header .nav-links { max-height: calc(100dvh - 84px); }
  :root .site-header.passport-header .nav-wrap { min-height: 84px; gap: 6px; }
  :root .site-header.passport-header .nav-actions { gap: 6px; }
  :root .site-header.passport-header .workspace-public-return { gap: 5px; padding: 4px; font-size: .8125rem; }
  :root .site-header.passport-header .workspace-public-return span { max-width: 65px; }
}

/* Keep the public destination links visible on ordinary desktop windows. */
@media(min-width:1200px) and (max-width:1550px){
 :root .site-header:not(.passport-header) .nav-wrap{width:calc(100% - 48px);gap:14px;min-height:84px;height:auto}
 :root .site-header:not(.passport-header) .brand{gap:10px;flex-shrink:0}
 :root .site-header:not(.passport-header) .brand-mark.c4-logo{width:64px;height:46px}
 :root .site-header:not(.passport-header) .brand-copy{max-width:200px}
 :root .site-header:not(.passport-header) .nav-links{gap:14px;margin-inline-start:auto}
 :root .site-header:not(.passport-header) .nav-actions{gap:8px;margin-inline-start:0}
 :root .site-header:not(.passport-header) .nav-actions>.btn{padding-inline:16px;gap:12px;font-size:14px;min-height:44px}
 :root .site-header:not(.passport-header) .nav-actions>.theme-toggle{width:40px;min-width:40px;padding:8px}
 :root .site-header:not(.passport-header) .language-trigger{padding-inline:12px}
}
@media(min-width:1200px) and (max-width:1279px){
 :root .site-header:not(.passport-header) .brand{flex-direction:column;align-items:center;gap:2px}
 :root .site-header:not(.passport-header) .brand-copy{display:none}
 :root .site-header:not(.passport-header) .brand-mobile-ai{display:block;font-size:12px;line-height:1.4;font-weight:600;white-space:nowrap;color:var(--brand-hover)}
}
@media(min-width:1200px) and (max-width:1550px){
 :root:not([lang=en]) .site-header:not(.passport-header) .brand{flex-direction:column;align-items:center;gap:2px}
 :root:not([lang=en]) .site-header:not(.passport-header) .brand-copy{display:none}
 :root:not([lang=en]) .site-header:not(.passport-header) .brand-mobile-ai{display:block;font-size:12px;line-height:1.4;font-weight:600;white-space:nowrap;color:var(--brand-hover)}
}

/* The C4 meaning belongs in the hero; the header keeps a compact AI signature. */
:root .site-header .brand{flex-direction:column;align-items:center;gap:2px}
:root .site-header .brand-copy{display:none}
:root .site-header .brand-mobile-ai{display:block;font-size:12px;line-height:1.4;font-weight:600;letter-spacing:.01em;white-space:nowrap;color:var(--brand-hover)}
@media(max-width:700px){
 .app-shell .app-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .app-shell .app-stat{min-width:0}
 .app-shell .app-stat span{overflow-wrap:anywhere}
}

@media(max-width:700px){
 :root .site-header.passport-header .workspace-public-return{width:44px;min-width:44px;height:44px;padding:10px;gap:0;flex-shrink:0}
 :root .site-header.passport-header .workspace-public-return span{display:none}
}
:root[dir=rtl] .workspace-public-return .icon{transform:none}