/* D-200: active brand composition. Palette is generated from surface-tokens.json. */
.site-brand {
  --paper: var(--brand-paper); --ink: var(--brand-ink); --muted: var(--brand-muted);
  --line: var(--brand-line); --wash: var(--brand-wash); --orange: var(--brand-signal);
  --accent: var(--brand-signalText);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}
.site-brand h1,.site-brand h2,.site-brand h3 { font-weight: 500; }
.site-brand .serif { font: inherit; letter-spacing: inherit; color: var(--muted); }
.site-brand .wrap { width: min(1320px,calc(100% - 96px)); }
.site-brand .nav { height: 100px; border: 0; gap: 28px; }
.site-brand .nav nav { margin-left: auto; gap: 32px; }
.nav-cta { display: inline-flex; align-items: center; gap: 24px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; font-size: 12px; }
.nav-cta:hover { background: var(--ink); color: var(--paper); }
.site-brand .button { border-radius: 999px; min-height: 48px; padding: 15px 24px; gap: 24px; font-weight: 600; }
.site-brand .button.ink { background: var(--ink); color: var(--paper); }
.site-brand .button.ink:hover { background: var(--brand-signal); color: var(--ink); }
.site-brand .button.secondary { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.site-brand .button.secondary:hover { border-color: var(--ink); }
.site-brand .eyebrow { color: var(--muted); font: 600 10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing: .12em; }
.site-brand :is(a,button,summary,input,select):focus-visible { outline-color: var(--brand-signalText); }
.site-brand .hero { grid-template-columns: 1.05fr 1fr; gap: 54px; padding-block: 42px 70px; }
.site-brand .hero-copy { padding: 0; }
.site-brand .hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.site-brand .hero .eyebrow::before { content: ''; width: 7px; height: 7px; background: var(--orange); border-radius: 50%; }
.site-brand .hero h1 { font-size: clamp(58px,6.25vw,90px); line-height: .99; letter-spacing: -.06em; margin-bottom: 30px; }
.site-brand .hero h1 .serif { color: var(--ink); }
.site-brand .hero-copy .lead { font-size: 17px; line-height: 1.7; max-width: 35ch; }
.site-brand .hero-copy .actions { gap: 10px; margin-top: 30px; }
.site-brand .hero .actions .button { font-size: 12px; padding: 15px 20px; gap: 16px; }
.brand-promises { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 22px 0 0; font-size: 10px; color: var(--muted); }
.brand-promises li { display: flex; align-items: center; gap: 6px; }
.brand-promises li::before { content: '+'; color: var(--ink); font-size: 13px; }
.site-brand .presence-card { padding: 0; border: 1px solid var(--line); border-radius: 24px; background: var(--wash); box-shadow: none; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.site-brand .presence-top { padding: 24px 26px 0; color: var(--ink); font: 10px/1.6 ui-monospace,monospace; letter-spacing: .06em; }
.site-brand .dot { background: var(--brand-signalText); }
.site-brand #hero-face { width: min(310px,80%); min-height: 310px; margin: 8px auto 0; z-index: 1; }
.site-brand #hero-face .showcase-layer>div { border-radius: 0!important; }
.hero-orbits { position: absolute; inset: 60px -15px 130px; pointer-events: none; display: grid; place-items: center; }
.hero-orbits i { position: absolute; width: 92%; height: 70%; border: 1px solid var(--line); border-radius: 50%; transform: rotate(-30deg); }
.hero-orbits i:nth-child(2) { transform: rotate(30deg); }
.hero-orbits b { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); right: 17%; top: 18%; }
.hero-caption { position: relative; display: grid; gap: 4px; padding: 0 24px 24px; text-align: center; }
.hero-caption span:first-child { font-size: 15px; font-weight: 500; }
.hero-caption span:last-child { font-size: 10px; color: var(--muted); }
.showcase-footer { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; background: var(--paper); border-top: 1px solid var(--line); }
.showcase-identity { margin: 0; line-height: 1.5; }
.showcase-identity strong { display: block; font-size: 18px; font-weight: 500; }
.showcase-identity span { font: 10px/1.5 ui-monospace,monospace; color: var(--muted); }
.site-brand .showcase-navigation { flex-shrink: 0; gap: 6px; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
.site-brand .showcase-navigation button { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; color: var(--ink); }
.site-brand .showcase-navigation button:hover { background: var(--wash); }
.site-brand .showcase-navigation #next-avatar { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.site-brand .showcase-navigation #pause-face { width: 44px; height: 44px; border-color: transparent; }
.site-brand .showcase-divider { background: var(--line); }
.site-brand .principle-strip { background: var(--ink); color: var(--paper); border: 0; }
.site-brand .principle-strip>.wrap { padding-block: 23px; }
.site-brand .principle-strip span { color: var(--brand-inverseMuted); font: 10px ui-monospace,monospace; }
.site-brand .principle-strip p { font-size: 13px; }
.site-brand .principle-strip a { color: var(--orange); font-size: 24px; text-decoration: none; min-width: 44px; text-align: center; }
.site-brand .experience { padding-block: 100px; border: 0; }
.site-brand .experience-heading { align-items: end; margin-bottom: 44px; }
.site-brand .experience-heading h2 { font-size: clamp(38px,4vw,60px); }
.site-brand .experience-intro { font-size: 15px; line-height: 1.7; max-width: 30ch; color: var(--muted); }
.site-brand .experience-grid { gap: 24px; }
.site-brand .experience-card { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.site-brand .experience-art { border-radius: 14px; height: 250px; background: var(--wash); }
.site-brand .voice-art { background: var(--ink); color: var(--paper); }
.site-brand .voice-orbit { border-color: var(--brand-muted); }
.site-brand .voice-wave i { background: var(--orange); }
.site-brand .voice-symbol { color: var(--paper); background: transparent; border-color: var(--brand-muted); }
.site-brand .voice-art .art-caption { color: var(--brand-inverseMuted); }
.site-brand .identity-art { background: var(--peach,var(--brand-peach)); }
.site-brand .identity-lineup>div { background: var(--paper); border-color: var(--line); }
.site-brand .comfort-art { background: var(--wash); }
.site-brand .comfort-sheet { background: var(--paper); border-color: var(--line); color: var(--ink); }
.site-brand .comfort-track { background: var(--line); }
.site-brand .comfort-track i { background: var(--ink); }
.site-brand .art-caption { color: var(--muted); }
.site-brand .experience-copy { padding: 24px 0 0; }
.site-brand .experience-number { color: var(--accent); font: 10px ui-monospace,monospace; }
.site-brand .experience-copy h3 { margin-top: 14px; font-size: 25px; letter-spacing: -.045em; }
.site-brand .experience-copy p { font-size: 14px; line-height: 1.75; }
.site-brand .desktop-feature { gap: 64px; }
.site-brand .desktop-copy h2 { font-size: clamp(38px,4vw,58px); }
.site-brand .desktop-scene { height: 490px; background: var(--wash); border: 1px solid var(--line); border-radius: 16px; }
.site-brand .desktop-scene-bar { background: var(--paper); border-color: var(--line); color: var(--muted); }
.site-brand .desktop-document { background: var(--paper); border-color: var(--line); transform: rotate(-4deg); }
.site-brand .desktop-document-title { font: 500 29px/1.15 "Helvetica Neue",Arial,sans-serif; color: var(--ink); }
.site-brand :is(.desktop-document-label,.desktop-document-note,.desktop-companion-header,.desktop-ready,.desktop-control-labels,.desktop-grip) { color: var(--muted); }
.site-brand .desktop-document>i { background: var(--line); }
.site-brand .desktop-companion-card { width: 210px; bottom: 40px; right: 28px; transform: rotate(3deg); background: var(--paper); border-color: var(--line); }
.site-brand .desktop-companion-card img { height: 205px; background: var(--wash); }
.site-brand .desktop-control-labels span { border-color: var(--line); color: var(--ink); background: var(--paper); }
.site-brand .desktop-control-labels span:nth-child(2) { background: var(--ink); color: var(--paper); }
.site-brand .integration { gap: 70px; }
.site-brand .code-card { background: var(--ink); color: var(--paper); border-radius: 16px; padding: 32px; }
.site-brand .code-top,.site-brand .code-card p { color: var(--brand-inverseMuted); }
.site-brand .code-card pre { color: var(--paper); }
.site-brand .code-card .button { background: var(--orange); color: var(--ink); }
.site-brand .closing-cta { position: relative; background: var(--ink); color: var(--paper); border-radius: 20px; padding: 80px 32px; overflow: hidden; }
.site-brand .closing-cta .serif { color: var(--brand-inverseMuted); }
.site-brand .closing-cta .eyebrow { color: var(--orange); }
.site-brand .closing-cta .button.ink { background: var(--orange); color: var(--ink); }
.site-brand .closing-cta .button.ink:hover { background: var(--paper); }
.site-brand .closing-cta a:focus-visible { outline-color: var(--orange); }
.site-brand .closing-cta p:last-child { color: var(--brand-inverseMuted); font-size: 12px; }
.site-brand .desktop-preview { background: var(--wash); border-radius: 20px; }
.site-brand .desktop-preview-copy p { font: 500 26px/1.2 "Helvetica Neue",Arial,sans-serif; }
.site-brand .desktop-download { border-radius: 14px; background: var(--paper); }
.site-brand .desktop-download .button:disabled { opacity: 1; background: var(--wash); border-color: var(--line); color: var(--muted); transform: none; }
.site-brand .desktop-mode { border-radius: 14px; }
body>footer.site-footer,.site-footer-meta { border-color: var(--brand-line); color: var(--brand-muted); }
.site-footer-identity p,.site-footer-links a { color: var(--brand-muted); }
.brand-reference .brand-intro { max-width: 1000px; }
.brand-reference .brand-intro .lead { max-width: 52ch; }
.brand-reference .wordmark-specimen { padding: 48px; background: var(--wash); border-radius: 16px; }
.brand-reference .brand-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin: 36px 0; }
.brand-reference .brand-grid article { min-width: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.brand-reference .brand-grid p { color: var(--muted); }
.brand-reference .brand-grid .brand-example { color: var(--ink); font-size: 22px; }
.brand-reference .brand-palette { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin: 32px 0; }
.brand-swatch { min-height: 150px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; }
.brand-swatch small { font: 11px/1.8 ui-monospace,monospace; }
.swatch-paper { background: var(--paper); }.swatch-ink { background: var(--ink); color: var(--paper); }.swatch-signal { background: var(--orange); }.swatch-peach { background: var(--brand-peach); }.swatch-wash { background: var(--wash); }
.brand-character { display: grid; grid-template-columns: 1fr 1.3fr; align-items: center; gap: 60px; }
.brand-character img { display: block; width: min(100%,320px); height: auto; margin: auto; border-radius: 16px; }
.brand-character figure { margin: 0; padding: 28px; background: var(--wash); border-radius: 16px; }
.brand-character figcaption { font-size: 11px; text-align: center; margin-top: 12px; }
@media(max-width:1100px) {
 .site-brand .wrap { width: calc(100% - 48px); }
 .site-brand .hero { gap: 32px; }.site-brand .hero h1 { font-size: 68px; }
 .site-brand .nav nav { gap: 20px; }.nav-cta { gap: 12px; padding-inline: 16px; }
 .site-brand .desktop-feature,.site-brand .integration { gap: 36px; }
}
@media(max-width:800px) {
 .site-brand .wrap { width: calc(100% - 40px); }
 .site-brand .nav { min-height: 84px; height: auto; flex-wrap: wrap; padding-block: 20px; gap: 18px; }
 .site-brand .nav nav { order: 3; width: 100%; margin: 0; justify-content: flex-start; gap: 28px; }
 .site-brand .nav-cta { margin-left: auto; font-size: 11px; padding-inline: 12px; }
 .site-brand .hero { grid-template-columns: 1fr; padding-block: 28px 44px; gap: 36px; }
 .site-brand .hero h1 { font-size: clamp(54px,10vw,78px); }
 .site-brand .hero-copy .lead { max-width: 40ch; }
 .site-brand .presence-card { max-width: 560px; width: 100%; justify-self: center; }
 .site-brand #hero-face { width: min(300px,80%); }
 .site-brand .principle-strip>.wrap { flex-wrap: wrap; justify-content: flex-start; gap: 16px 24px; }
 .site-brand .principle-strip span { width: 100%; }
 .site-brand .principle-strip p { font-size: 11px; }.site-brand .principle-strip a { margin-left: auto; }
 .site-brand .experience,.site-brand .section { padding-block: 60px; }
 .site-brand .experience-heading { display: block; margin-bottom: 28px; }
 .site-brand .experience-grid { grid-template-columns: 1fr; gap: 36px; }
 .site-brand .experience-art { height: 230px; }
 .site-brand .desktop-feature { grid-template-columns: 1fr; }
 .site-brand .desktop-scene { height: 390px; }
 .site-brand .desktop-companion-card { width: 180px; right: 18px; bottom: 24px; }
 .site-brand .desktop-companion-card img { height: 170px; }
 .site-brand .closing-cta { padding: 56px 22px; }
 .site-brand .closing-cta h2 { font-size: clamp(38px,8vw,56px); }
 .brand-reference .brand-grid,.brand-character { grid-template-columns: 1fr; gap: 24px; }
 .brand-reference .brand-palette { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .brand-reference .wordmark-specimen { padding: 24px; min-height: 180px; }
}
@media(prefers-reduced-motion:reduce) {
 .site-brand *, .site-brand *::before, .site-brand *::after { scroll-behavior: auto; transition: none; animation: none; }
}

/* Comfortable touch targets and readable forms on phones and small tablets. */
@media(max-width:480px) {
 .site-brand .policy-intro h1 { font-size:clamp(34px,10vw,42px); }
}
@media(max-width:800px) {
 .site-brand .nav>a:not(.brand),.site-brand .desktop-toc a { min-height:44px; display:inline-flex; align-items:center; }
 .site-brand :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size:16px; }
 .site-brand .test-layout .check { min-height:44px; }
 .site-brand .test-layout input[type=checkbox] { flex:none; width:20px; height:20px; }
 .site-brand .step-title>span { flex-shrink:0; }
}