/* Brand layer, loaded after every page's inline leftovers so it wins the cascade at equal specificity.
   One weight (400), no capitals, headline font on headings, the old rainbow bars off. */
h1, h2, h3, h4, h5, h6, strong, b, th { font-weight: 400; }
em, i { font-style: normal; }
body { font-family: var(--al-font-body); font-weight: 400; }
h1, h2, h3, h4, .section-title, .footer-brand { font-family: var(--al-font-headline); font-weight: 400; }
h1 { letter-spacing: -0.02em; line-height: 1.05; }
h2, .section-title { letter-spacing: -0.01em; line-height: 1.15; }
.nav-rainbow, .footer-rainbow, .rainbow-bar { display: none; }
nav a.logo { display: flex; align-items: center; }
nav a.logo img { display: block; width: 150px; height: auto; }
.config-block pre .key, .prompt-line .p { color: var(--al-sky); }
.config-block pre .val { color: var(--al-paper); }
.config-block h3, .config-block p, .card.dark, .card.dark h3 { color: var(--al-paper); }
:focus-visible { outline: 2px solid var(--al-cobalt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.step .step-num, .step-num { background: var(--al-cobalt); color: var(--al-paper); }
.config-block :focus-visible, .cta-band :focus-visible, .card.dark :focus-visible { outline-color: var(--al-sky); }

.tool-card > div:first-child:not(.tool-card-body) { filter: grayscale(1); }

/* Brand elements on the inner pages (Brand Guidelines 1.0: paper grounds, water textures, the 24px icon set).
   The home page uses none of these classes. */
:root { --rainbow: var(--al-stone); }
.page-header { position: relative; padding-bottom: 64px; }
@media (max-width: 640px) { .page-header { padding-bottom: 36px; } .page-header + section, .page-header + .section { padding-top: 40px; }
  .lt-hero { padding-bottom: 40px !important; } .lt-sec { padding-top: 48px; }
  body:has(.lt-crumb) .back-link { display: none; } }
html { overflow-x: clip; }
.page-header::before { content: ""; position: absolute; inset: 0; background: var(--al-paper); box-shadow: 0 0 0 100vmax var(--al-paper);
  clip-path: inset(0 -100vmax); z-index: -1; }
.page-header::after { content: ""; position: absolute; left: 50%; width: 100vw; transform: translateX(-50%); bottom: 0; height: 14px;
  background: url("/images/textures/midnight-sun-1280.jpg") 0 40% / 1280px auto repeat-x; animation: al-drift 60s linear infinite; }
@keyframes al-drift { to { background-position: 1280px 40%; } }
.page-header .tool-count { background: var(--al-white); }
.section-label { display: block; background: none; color: #2e4756; padding: 0; letter-spacing: 0; font-size: 15px; }
.section-label::before { display: none; }
.card::after, .client-card::after { height: 6px; background: url("/images/textures/daybreak-640.jpg") center / 640px auto; }
.card, .client-card, .tool-card { border-radius: 0; box-shadow: none; }
.tool-card { background: var(--al-paper); border-color: transparent; }
.cta-band { background: var(--al-navy); }
.close-band { position: relative; }
.cta-band::before, .close-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: url("/images/textures/ocean-glow-1280.jpg") 0 50% / 1280px auto repeat-x; }
.journey-line { background: var(--al-stone); }
.divider::before, .divider::after { display: none; }
.tool-card > .al-card-icon { filter: none; width: 24px; height: 24px; margin-bottom: 12px; background: var(--al-navy);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }