/* Shared English components. Page-specific CSS owns layout, this owns identity. */
@import url("brand.css?v=04efdd2c433b");
* { box-sizing: border-box; }
html { color: var(--brand-ink); background: var(--brand-ground); font-family: var(--brand-font); line-height: var(--brand-body-leading); }
body { margin: 0; color: var(--brand-ink); background: var(--brand-ground); font-family: var(--brand-font); }
button, input, select, textarea { font: inherit; }
a { color: var(--brand-primary); text-underline-offset: .2em; }
h1, h2, h3 { font-family: var(--brand-font); font-weight: 700; letter-spacing: var(--brand-heading-tracking); line-height: var(--brand-heading-leading); }
:where(button, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { min-height: var(--brand-target); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--brand-tide); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
.wrap, .guide-wrap { width: min(var(--brand-page-width), calc(100% - 40px)); margin-inline: auto; }
.site-header, .guide-header { background: var(--brand-field); color: var(--brand-paper); border-bottom: 1px solid #7FD3E355; }
.header-row, .guide-header .guide-wrap { min-height: 78px; gap: 16px; }
.site-header .brand, .guide-header .guide-brand, .guide-header .guide-brand:first-letter { color: var(--brand-paper); }
.brand-mark, .guide-brand::before { width: 32px; height: 32px; flex-shrink: 0; }
.brand, .guide-brand span { font-size: 1rem; font-weight: 700; letter-spacing: -.018em; }
.site-header .header-cta, .guide-header .header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 18px; border-radius: var(--brand-radius-pill); background: var(--brand-aqua); color: var(--brand-midnight); font-size: .875rem; font-weight: 600; white-space: normal; text-align: center; }
.site-header .header-cta:hover, .guide-header .header-cta:hover { background: #7EDDD1; }
.site-header :focus-visible, .guide-header :focus-visible, .hero :focus-visible, .email-section :focus-visible, .site-footer :focus-visible, .guide-footer :focus-visible { outline-color: #7FD3E3; }
.site-footer, .guide-footer { background: var(--brand-midnight); color: var(--brand-paper); padding-block: 40px; }
.site-footer a, .guide-footer a { color: var(--brand-paper); }
.site-footer p, .guide-footer p { font-size: .875rem; line-height: 1.6; }
.eyebrow { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; text-transform: none; }
.hero .eyebrow, .email-section .eyebrow { color: var(--brand-paper); }
.guide-hero h1 { line-height: var(--brand-heading-leading); }
.feature-card, .guide-grid li a, .qa, .story-card, .resource-card, .aside-box, .feedback-form, .signup-card, .chat-panel { border-radius: var(--brand-radius-lg); box-shadow: none; }
.preview-choice, .comments input:not(.trap), .comments textarea, .feedback-form textarea, .signup-card input[type="email"] { border-radius: var(--brand-radius-sm); }
.aside-action, .feedback-form button, .signup-card button, .comments form button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-weight: 600; }
.exam-callout { background: var(--brand-warning-soft); border-color: var(--brand-warning); color: var(--brand-warning); }
.exam-callout a { color: inherit; }
.chat-page { --amber: var(--brand-warning); --amber-soft: var(--brand-warning-soft); --error: var(--brand-error); --error-soft: var(--brand-error-soft); --on-error-soft: var(--brand-error); --error-verdict: var(--brand-error); }
.chat-status[data-state="offline"], .notes-intro { color: var(--brand-warning); }
.sources .n { color: var(--brand-label); }
.cite:hover { color: var(--brand-paper); }
.english-document { width: min(var(--brand-reading-width), calc(100% - 40px)); margin: 48px auto 64px; overflow-wrap: anywhere; }
.english-document h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
.english-document h2 { margin-top: 2rem; font-size: 1.4rem; }
.english-document button { background: var(--brand-primary); color: var(--brand-on-primary); padding: 12px 20px; border: 0; border-radius: var(--brand-radius-pill); }
.english-document nav { display: flex; flex-wrap: wrap; gap: 16px; }
.english-document nav a { padding-block: 10px; }
.english-document nav [aria-current] { font-weight: 700; }
.english-disclosure { text-align: center; padding-block: 48px; }
.english-disclosure .tag { color: var(--brand-label); }
.skip-link { position: absolute; left: -9999px; top: 8px; padding: 12px; z-index: 100; background: var(--brand-surface); color: var(--brand-ink); }
.skip-link:focus { left: 8px; }
@media (max-width: 660px) {
  .wrap, .guide-wrap { width: calc(100% - 32px); }
  .header-row, .guide-header .guide-wrap { min-height: 72px; flex-wrap: wrap; padding-block: 12px; gap: 12px; }
  .brand, .guide-brand span { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

.guide-header .locale-nav a, .guide-header .locale-nav > span { color: var(--brand-paper); }
.guide-header .locale-nav [aria-current] { background: #143640; color: #9CE7DD; }
.guide-header .locale-nav a:focus-visible { outline-color: #7FD3E3; }
@media (max-width: 660px) { .hero h1 { font-size: clamp(2rem, 10vw, 3.5rem); overflow-wrap: anywhere; } }

.exam-day-page .exam-callout strong, .exam-callout strong, .exam-callout p { color: var(--brand-warning); }

.guide-grid li, .guide-grid li a { min-width: 0; }
.guide-grid h2, .guide-grid h3 { overflow-wrap: anywhere; }