html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--wm-bg); color: var(--wm-ink); }
h1, h2, h3 { letter-spacing: -.035em; }
a, button, input, textarea, select { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--wm-focus); outline-offset: 5px;
}
button { font: inherit; }
input, textarea, select { font: inherit; background: var(--wm-surface); color: var(--wm-ink); }
input::placeholder, textarea::placeholder { color: var(--wm-muted); opacity: 1; }
.wm-page { background: var(--wm-bg); }
.wm-gradient-soft { background: linear-gradient(145deg, var(--wm-surface), var(--wm-soft)); }
.wm-gradient-brand { background: var(--wm-brand-gradient); color: var(--wm-cream); }
.shadow-lg, .shadow-xl, .hover\:shadow-lg:hover { box-shadow: var(--wm-shadow); }
.wm-bg-cream { background-color: var(--wm-cream-surface); }
.wm-bg-deep { background-color: var(--wm-blue-deep); }
.wm-bg-error { background-color: var(--wm-error-solid); }
.wm-bg-error-tint { background-color: var(--wm-error-tint); }
.wm-bg-glass { background-color: #ffffff14; }
.wm-bg-line { background-color: var(--wm-line); }
.wm-bg-primary { background-color: var(--wm-blue); }
.wm-bg-soft { background-color: var(--wm-soft); }
.wm-bg-success { background-color: var(--wm-success-solid); }
.wm-bg-success-tint { background-color: var(--wm-success-tint); }
.wm-bg-surface { background-color: var(--wm-surface); }
.wm-bg-tint { background-color: var(--wm-tint); }
.wm-border-accent { border-color: var(--wm-accent); }
.wm-border-cream-ink { border-color: var(--wm-cream-ink); }
.wm-border-line { border-color: var(--wm-line); }
.wm-border-on-color { border-color: var(--wm-cream); }
.wm-border-success { border-color: var(--wm-success); }
.wm-focus-ring:focus { --tw-ring-color: var(--wm-focus); }
.wm-focus-border-transparent:focus { border-color: transparent; }
.group:hover .wm-group-hover-text-accent { color: var(--wm-accent); }
.group:hover .wm-group-hover-text-error { color: var(--wm-error); }
.group:hover .wm-group-hover-text-success { color: var(--wm-success); }
.wm-hover-bg-glass:hover { background-color: #ffffff14; }
.wm-hover-bg-primary-hover:hover { background-color: var(--wm-blue-deep); }
.wm-hover-bg-soft:hover { background-color: var(--wm-soft); }
.wm-hover-bg-tint:hover { background-color: var(--wm-tint); }
.wm-hover-text-accent:hover { color: var(--wm-accent); }
.wm-hover-text-on-color:hover { color: var(--wm-cream); }
.wm-text-accent { color: var(--wm-accent); }
.wm-text-cream-ink { color: var(--wm-cream-ink); }
.wm-text-error { color: var(--wm-error); }
.wm-text-ink { color: var(--wm-ink); }
.wm-text-muted { color: var(--wm-muted); }
.wm-text-on-blue { color: var(--wm-on-blue); }
.wm-text-on-color { color: var(--wm-cream); }
.wm-text-success { color: var(--wm-success); }


/* Small shared shell; primary landing pages need no utility stylesheet or webfont. */
* { box-sizing: border-box; }
body { margin: 0; font-size: 1rem; line-height: 1.65; }
a { color: var(--wm-accent); text-underline-offset: .2em; }
a:hover { text-decoration: underline; }
.site-header, .simple-footer, .simple-page { width: min(100% - 3rem, 64rem); margin-inline: auto; }
.simple-nav, .simple-nav > div, .simple-footer, .simple-footer nav { display: flex; align-items: center; gap: 1.5rem; }
.simple-nav { justify-content: space-between; padding-block: 1.4rem; border-bottom: 1px solid var(--wm-line); }
.simple-nav a, .simple-footer a { text-decoration: none; font-size: .875rem; }
.simple-nav a:hover, .simple-footer a:hover { text-decoration: underline; }
.simple-nav .brand { display: inline-flex; align-items: center; gap: .65rem; font-size: 1rem; font-weight: 650; color: var(--wm-ink); white-space: nowrap; }
.brand img { border-radius: 7px; }
.simple-footer { justify-content: space-between; border-top: 1px solid var(--wm-line); padding-block: 1.5rem; color: var(--wm-muted); font-size: .875rem; }
.simple-page h1, .simple-page h2, .simple-page h3, .simple-page p { margin: 0; }
.intro { padding: 4.5rem 0 3.5rem; max-width: 46rem; }
.simple-page .eyebrow { color: var(--wm-accent); font-size: .875rem; font-weight: 650; margin-bottom: 1rem; }
.simple-page h1 { font-size: clamp(2.35rem, 5.5vw, 4rem); line-height: 1.1; font-weight: 650; letter-spacing: -.045em; text-wrap: balance; }
.simple-page .lead { margin-top: 1.5rem; font-size: 1.125rem; color: var(--wm-muted); max-width: 40rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.25rem; padding: .8rem 1.2rem; border: 1px solid var(--wm-accent); border-radius: .45rem; background: var(--wm-accent); color: var(--wm-on-accent); text-decoration: none; font-weight: 600; }
.button:hover { background: var(--wm-accent-hover); text-decoration: none; }
.button.secondary { background: transparent; color: var(--wm-accent); }
.button.secondary:hover { background: var(--wm-tint); }
.simple-page .note { margin-top: 1rem; color: var(--wm-muted); font-size: .875rem; }
.split-section { display: grid; grid-template-columns: 1fr 1.8fr; gap: 3rem; border-top: 1px solid var(--wm-line); padding-block: 2.5rem; }
.simple-page h2 { font-size: 1.4rem; line-height: 1.3; font-weight: 650; }
.split-section p + p { margin-top: 1rem; }
.split-section p + a { display: inline-block; margin-top: 1rem; }
.guide-links { display: flex; flex-direction: column; gap: 1rem; }
/* The trailing arrow is part of the label. Laying the link out as a flex row
   pushed it to the far edge of the column, hundreds of pixels from its text. */
.guide-links a { text-decoration: none; }
.guide-links a:hover { text-decoration: underline; }
.simple-page ol { padding-left: 1.3rem; margin: 0; }
.simple-page li + li { margin-top: .75rem; }
.simple-page details { border-bottom: 1px solid var(--wm-line); padding-block: 1rem; }
.simple-page details:first-child { padding-top: 0; }
.simple-page summary { cursor: pointer; font-weight: 600; }
.simple-page details p { margin-top: .75rem; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 50; padding: .75rem 1rem; background: var(--wm-surface); color: var(--wm-accent); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
/* Contact form: the same left-aligned rhythm as the surrounding split section. */
.contact-form { display: grid; gap: 1.25rem; }
.contact-form label { display: block; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: .75rem 1rem; border: 1px solid var(--wm-line); border-radius: .45rem;
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form .button { width: 100%; }
@media (min-width: 651px) {
  .contact-form .button { width: auto; justify-self: start; }
}
/* Existing guides keep their content and anchors, with quieter article styling. */
main:not(.simple-page) { max-width: 64rem; margin: auto; }
main:not(.simple-page) h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
main:not(.simple-page) h2 { font-size: 1.6rem; }
main:not(.simple-page) .shadow-lg, main:not(.simple-page) .shadow-xl, main:not(.simple-page) .shadow-md { box-shadow: none; }
main:not(.simple-page) .wm-gradient-brand { background: var(--wm-tint); color: var(--wm-ink); }
main:not(.simple-page) .wm-gradient-brand .wm-text-on-color, main:not(.simple-page) .wm-gradient-brand .wm-text-on-blue { color: var(--wm-ink); }
main:not(.simple-page) .wm-gradient-soft { background: transparent; }
main:not(.simple-page) .py-20 { padding-block: 2.5rem; }
main:not(.simple-page) .text-sm { font-size: .875rem; }
@media (max-width: 650px) {
  .site-header, .simple-footer, .simple-page { width: calc(100% - 2rem); }
  .simple-nav { align-items: flex-start; flex-direction: column; gap: .75rem; padding-block: 1rem; }
  .simple-nav > div { flex-wrap: wrap; gap: 1.5rem; }
  .simple-nav > div a { padding-block: .3rem; }
  .intro { padding-block: 2.5rem; }
  .split-section { grid-template-columns: 1fr; gap: 1rem; padding-block: 2rem; }
  .simple-footer { align-items: flex-start; flex-direction: column; gap: .5rem; }
  main { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* One public page: the working viewer first, crawlable guidance underneath. */
.simple-page.decode-page { width: min(100% - 2rem, 82rem); }
.decode-copy { width: min(100%, 64rem); margin-inline: auto; }
.decode-page .intro { max-width: 64rem; padding-block: 1.5rem; }
.decode-page h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.decode-page .eyebrow { margin-bottom: .5rem; }
.decode-page .lead { max-width: 60rem; font-size: 1rem; margin-top: .75rem; }
.viewer-surface { margin-bottom: 2rem; }
/* Initial height is a loading fallback; viewer-frame.mjs fits the content. */
.viewer-frame { display: block; width: 100%; height: 22rem; border: 1px solid var(--wm-line); border-radius: .75rem; background: var(--wm-bg); }
@media (max-width: 650px) {
  .viewer-frame { border-radius: .5rem; }
}