/* Shared layout for the three one-page business site examples. Each page sets its own colors and fonts. */
html { color-scheme: var(--scheme, light); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body-font, system-ui, sans-serif); line-height: 1.6; }
a { color: var(--link); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.wrap { max-width: 48rem; margin: 0 auto; padding: 0 1rem; }
.bar { position: sticky; top: 0; background: var(--bar); border-bottom: 1px solid var(--line); z-index: 1; }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: .7rem; padding-bottom: .7rem; flex-wrap: wrap; }
.brand { font-family: var(--head-font, inherit); font-weight: 800; font-size: 1.1rem; }
nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { font-weight: 700; text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; transition: border-color .15s ease; }
nav a:hover { border-bottom-color: currentColor; }
.badge { display: inline-block; border: 2px solid currentColor; border-radius: 999px; padding: .1rem .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
section { padding: 3rem 0; scroll-margin-top: 4.5rem; }
section + section { border-top: 1px solid var(--line); }
#home { padding-top: 2.5rem; }
h1 { font-family: var(--head-font, inherit); font-size: clamp(2.1rem, 8vw, 3.6rem); line-height: 1.05; margin: .75rem 0 1rem; overflow-wrap: break-word; }
.tagline { font-size: 1.2rem; color: var(--mute); margin: 0; max-width: 34rem; }
h2 { font-family: var(--head-font, inherit); font-size: clamp(1.4rem, 5vw, 2rem); margin: 0 0 1rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: 1.5rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius, .6rem); padding: 1rem 1.1rem; }
.card h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.card p { margin: 0; color: var(--mute); }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; margin: 0; }
dt { font-weight: 700; }
dd { margin: 0; color: var(--mute); overflow-wrap: anywhere; }
footer { padding: 2rem 0 3rem; color: var(--mute); font-size: .9rem; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}