:root {
  --cp-black: var(--color-brand-primary);
  --cp-charcoal: var(--color-brand-primary-hover);
  --cp-gray: var(--color-brand-muted);
  --cp-muted: var(--color-text-muted);
  --cp-line: var(--color-border-subtle);
  --cp-white: var(--color-surface-card);
}

html {
  font-size: 14px;
  scroll-behavior: smooth;
}

body {
  background: var(--cp-white);
  color: var(--cp-black);
  font-family: Montserrat, sans-serif;
  margin: 0;
}

a { color: var(--cp-charcoal); }
a:hover { color: var(--cp-black); }

.site-header { background: var(--cp-white); }
.site-header nav { min-height: 75px; }
.brand-lockup { color: var(--cp-black); }
.brand-lockup img { height: 40px; width: 40px; }
.brand-lockup > .brand-name {
  color: #1d1d1b;
  font-size: 1.5rem;
  font-weight: 700;
  margin-left: 1rem;
  width: 210px;
}
.brand-lockup > .brand-name span { color: var(--cp-gray); }
.brand-lockup small {
  color: var(--cp-muted);
  display: block;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
  margin-top: .2rem;
  text-transform: uppercase;
}
.header-actions .btn { border-radius: var(--radius-md); font-size: .875rem; padding: .5rem 1rem; }
.btn-dark { background: var(--cp-charcoal); border-color: var(--cp-charcoal); color: var(--cp-white); }
.btn-dark:hover, .btn-dark:focus { background: var(--cp-white); border-color: var(--cp-charcoal); color: var(--cp-charcoal); }
.btn-outline-dark { border-color: var(--cp-charcoal); color: var(--cp-charcoal); }
.btn-outline-dark:hover, .btn-outline-dark:focus { background: var(--cp-charcoal); border-color: var(--cp-charcoal); color: var(--cp-white); }

.page-content { padding-bottom: 3rem; }
.heading-1 { font-size: 2rem; line-height: 2.5rem; }
.link-help {
  color: var(--cp-black) !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(87,87,86,.75) !important;
  text-decoration-style: dotted !important;
  text-underline-offset: .16em;
}
.hero-model { color: var(--cp-muted); display: inline-block; max-width: 100%; }
.hero-model span { display: block; font-size: .75rem; margin-top: .35rem; text-align: right; text-decoration: underline; }

.create-cta { margin-bottom: 6rem; margin-top: 6rem; }
.create-cta p { line-height: 1.65; }
.free-copy {
  color: var(--cp-charcoal);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0;
  text-transform: uppercase;
}
.cta-platform-note { color: var(--cp-muted); font-size: .75rem; margin-top: .5rem; }

.ololu-platform {
  background: #f8f9fa;
  border-bottom: 1px solid var(--cp-line);
  border-top: 1px solid var(--cp-line);
  margin: 1rem auto 6rem;
  padding: 4rem;
}
.platform-eyebrow {
  color: var(--cp-gray);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: .75rem;
  text-transform: uppercase;
}
.ololu-platform h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.25rem; }
.platform-lead { font-size: 1.125rem; font-weight: 600; line-height: 1.6; }
.ololu-platform p { line-height: 1.65; }
.platform-learn-link { font-size: .875rem; font-weight: 700; text-underline-offset: .2em; }
.platform-actions .btn { padding: .7rem 1rem; }
.platform-redirect-note { color: var(--cp-muted); font-size: .75rem; margin-top: 1rem; }
.platform-feature {
  background: var(--cp-white);
  border: 1px solid var(--cp-line);
  padding: 1.5rem;
}
.platform-feature > span { color: var(--cp-muted); font-size: .75rem; font-weight: 700; }
.platform-feature h3 { font-size: 1rem; font-weight: 700; margin: .75rem 0 .5rem; }
.platform-feature p { color: var(--cp-gray); font-size: .875rem; margin: 0; }

.scroll-cue { margin: 6rem auto; text-align: center; }
.scroll-cue svg {
  animation: action 1s infinite alternate;
  fill: var(--cp-black);
  height: 100px;
  width: 100px;
}

.content-block {
  margin: 6rem auto;
  max-width: 100%;
  scroll-margin-top: 1rem;
  text-align: center;
}
.content-block h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.content-block p { line-height: 1.65; margin-bottom: 1rem; }
.content-block .answer-summary { font-weight: 700; }
.reaction-block { margin: 6rem auto 3rem; }
.site-footer { background: var(--footer-background); color: var(--footer-foreground); font-size: .75rem; }
.site-footer a { color: var(--footer-foreground); text-decoration: none; }

@keyframes action {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
  .heading-1 { font-size: 2.7rem; line-height: 3.5rem; }
}

@media (max-width: 767.98px) {
  .site-header nav { gap: .75rem; }
  .brand-lockup { justify-content: center; width: 100%; }
  .brand-lockup > .brand-name { font-size: 1.25rem; width: auto; }
  .header-actions { justify-content: center; width: 100%; }
  .hero-model { margin-top: 2.5rem; }
  .create-cta, .content-block, .scroll-cue { margin-bottom: 4.5rem; margin-top: 4.5rem; }
  .free-copy { font-size: 1.65rem; }
  .ololu-platform { margin-bottom: 4.5rem; padding: 2.25rem 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue svg { animation: none; }
}