/* 4.2531.45: --text-on-card is the text color for list items on the
   landing page's cards. --text-secondary (#8899b0, from app.css) on
   --bg-card (#1a2233) measures about 5.5 to 1: above the 4.5 minimum, but
   hard to read at the lists' small size. #C3DAF8 on the same card measured
   about 11.1 to 1. It is defined here rather than in app.css because only
   the landing page loads this file, and app.css is the dashboard's palette.
   4.2531.46: every other piece of text the landing drew in --text-secondary
   on a --bg-card surface uses it too: the "How it works" step paragraphs,
   the line under "Research Your First Draft Today" (its box is a gradient
   that starts from --bg-card), the answer in the "Why would I use this"
   box, and the walkthrough tabs that are not selected (showcase-poc.css).
   4.2531.47: the owner's color is now #9DD55F, a green that measures about
   9.2 to 1 on --bg-card. */
:root { --text-on-card: #9DD55F; }

.text-center { text-align: center; }

.skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-active);
  border-radius: var(--radius-sm);
  z-index: 100;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 180ms ease, opacity 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
  top: 1rem;
}

.site-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}

.alpha-section {
  padding: 4rem 0;
  position: relative;
  z-index: 1;
}

.alpha-section-alt {
  background: linear-gradient(180deg, transparent 0%, rgba(17, 24, 39, 0.4) 50%, transparent 100%);
}

.alpha-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-blue);
  margin-bottom: 1rem;
}

.alpha-section-lede {
  font-size: 1.125rem;
  color: var(--text-secondary);
  max-width: 55ch;
  margin-bottom: 3rem;
}

.hero-cta .btn,
.cta-inner .btn,
.site-nav .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1;
  border: 1px solid transparent;
  transition: all 180ms ease;
  text-decoration: none;
  white-space: nowrap;
}

.hero-cta .btn-primary,
.cta-inner .btn-primary {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 0 var(--glow-blue);
}

.hero-cta .btn-primary:hover,
.cta-inner .btn-primary:hover {
  border-color: #2563eb;
  box-shadow: 0 8px 24px -8px var(--glow-blue);
  transform: translateY(-1px);
}

.hero-cta .btn-ghost {
  border-color: transparent;
}

.hero-cta .btn-ghost:hover {
  background: var(--bg-card);
}

.alpha-section .section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  display: block;
  max-width: 40ch;
}

.header-user-info .user-name {
  font-size: 0.8125rem;
  color: var(--accent-green);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 999px;
  padding: 0.3rem 0.875rem;
}

.header-user-info .logout-btn {
  text-decoration: none;
}

.header-user-info .logout-btn:hover {
  color: var(--accent-red);
  border-color: var(--accent-red);
}

.btn-lg {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border);
}

.btn-secondary:hover {
  background: var(--bg-card);
  border-color: var(--border-active);
}

.btn.is-disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--bg-card);
  color: var(--text-muted);
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  position: relative;
}

.header-user-info {
  
  display: flex;
  align-items: center;
  gap: 0.75rem;
  white-space: nowrap;
  margin: 0 1rem;
  min-width: 0;
}

.header-user-info[hidden] {
  display: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand:hover { color: var(--text-primary); }

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent-blue), var(--accent-cyan));
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: #fff;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  color: var(--text-secondary);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 180ms ease;
}

.nav-link:hover { color: var(--text-primary); }

.hero {
  padding: 3rem 0 3rem;
  position: relative;
  z-index: 1;
}

.hero-inner { max-width: 800px; text-align: left; }

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent-blue);
  margin-bottom: 1.25rem;
}

.hero-title {
  font-size: clamp(1.125rem, 3vw, 2rem);
  margin-top: 2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  max-width: 20ch;
}

.hero-lede {
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 58ch;
  margin-bottom: 2.5rem;
  color: var(--text-secondary);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

.hero-footnote {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: all 180ms ease;
}

.feature-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-active);
  transform: translateY(-2px);
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.feature-body {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.steps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1rem;
}
.steps-list .shot,
.steps-list .shot-window {
  max-width: 380px;
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 180ms ease;
}

.step:hover {
  border-color: var(--border-active);
  background: var(--bg-card-hover);
}

.step-num {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.625rem 0.875rem;
  line-height: 1;
}

.step-body h3 {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

/* 4.2531.46: was var(--text-secondary); see --text-on-card at the top. */
.step-body p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-on-card);
}

.alpha-section-cta { padding: 5rem 0 6rem; }

.cta-inner {
  max-width: 600px;
  text-align: center;
  padding: 1.5rem 0.5rem;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(59, 130, 246, 0.08) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.cta-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

/* 4.2531.46: was var(--text-secondary); see --text-on-card at the top. */
.cta-lede {
  font-size: 1.0625rem;
  color: var(--text-on-card);
  margin-bottom: 2rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 0;
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy { font-size: 0.875rem; color: var(--text-muted); }

.footer-nav { display: flex; gap: 1.75rem; }

.footer-nav a {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 180ms ease;
}

.footer-nav a:hover { color: var(--text-primary); }

.alpha-banner {
  position: relative;
  z-index: 5;
  border-top: 1px solid rgba(245, 158, 11, 0.3);
  border-bottom: 1px solid rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.08);
}

.alpha-banner-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
}

.alpha-banner-icon {
  font-size: 1.25rem;
  color: var(--accent-amber);
  flex-shrink: 0;
}

.alpha-banner-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: 0.9375rem;
}

.alpha-banner-text strong { color: var(--text-primary); font-weight: 600; }
.alpha-banner-text span { color: var(--text-secondary); }

@media (max-width: 1100px) {
  .header-user-info .user-name { display: none; }
}

@media (max-width: 768px) {
  .site-container { padding: 0 1.25rem; }
  .alpha-section { padding: 4rem 0; }
  .hero { padding: 4rem 0 3.5rem; }
  .header-inner { height: 64px; }
  .site-nav { gap: 1rem; }
  .nav-link { display: none; }
  .header-user-info { display: none; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
  .features-grid { grid-template-columns: 1fr; }
  .steps-list { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 1rem; }
  .step-num { justify-self: start; }
  .cta-inner { padding: 2.5rem 1.5rem; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.hero-proof {
  list-style: none;
  margin: 2.2rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 860px;
  text-align: left;
}
.hero-proof-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.45;
}
.hero-proof-kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.35rem;
}

.loop-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  padding: 1.4rem 0;
}
.loop {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0;
  margin: 0;
  padding: 0;
}
.loop-stage {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-primary);
  padding: 0.3rem 0.9rem;
}
.loop-stage + .loop-stage::before {
  content: "\203A";
  color: var(--text-muted);
  margin-right: 1.1rem;
}
.loop-note {
  text-align: center;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0.9rem auto 0;
  font-size: 0.92rem;
}

.skeptic {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-cyan);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1.4rem 1.6rem;
  margin: 2.2rem 0 2.6rem;
}
.skeptic-q {
  font-size: 1.05rem;
  color: var(--text-primary);
  margin: 0 0 0.8rem;
}
/* 4.2531.46: was var(--text-secondary); see --text-on-card at the top. */
.skeptic-a p {
  color: var(--text-on-card);
  margin: 0 0 0.8rem;
  line-height: 1.6;
}
.skeptic-a p:last-child { margin-bottom: 0; }

.workflow-grid { grid-template-columns: repeat(2, 1fr); }

.fastpath {
  margin-top: 2.4rem;
}
.fastpath-title, .layers-title {
  font-size: 1.15rem;
  color: var(--text-primary);
  margin: 0 0 1.2rem;
}
.layers-title { margin-top: 2.8rem; }

.shot {
  margin: 1.1rem 0 0.4rem;
}
.shot-frame {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 10px;
}
.shot-bg { fill: var(--bg-secondary); stroke: var(--border); }
.shot-bar { fill: var(--bg-card); }
.shot-dot { fill: var(--text-muted); }
.shot-label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 18px;
}
.shot figcaption {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.45rem;
  max-width: 560px;
}

.layer {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  margin: 0 0 0.9rem;
}
.layer-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  color: var(--text-primary);
  font-weight: 600;
}
.layer-summary::-webkit-details-marker { display: none; }
.layer-summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  color: var(--text-muted);
}
.layer[open] > .layer-summary::after { content: "\2212"; }
.layer-summary:focus-visible {
  outline: 2px solid var(--border-active);
  outline-offset: 2px;
  border-radius: var(--radius);
}
.layer-kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
}
.layer-body {
  padding: 0 1.2rem 1.2rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.layer-steps {
  margin: 0.8rem 0 0;
  padding-left: 1.2rem;
}
.layer-steps li { margin-bottom: 0.45rem; }

@media (max-width: 760px) {
  .hero-proof { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
}

.brand-logo {
  display: block;
  width: 26px;
  height: auto;
  filter: drop-shadow(0 0 6px var(--glow-amber));
}
.shot-pathline {
  display: block;
  margin-top: 0.25rem;
  color: var(--accent-cyan);
}
.featlist-heading {
  font-size: 1.15rem;
  color: var(--text-primary);
  margin: 2.8rem 0 0.4rem;
}
.featlist-lede {
  color: var(--text-secondary);
  margin: 0 0 1.4rem;
  max-width: 720px;
}
.featlist-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.featlist-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}
.featlist-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin: 0 0 0.8rem;
}
.featlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 4.2531.45: was var(--text-secondary); see --text-on-card at the top. */
.featlist li {
  color: var(--text-on-card);
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.45rem 0 0.45rem 1.1rem;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.featlist li:last-child { border-bottom: none; }
.featlist li::before {
  content: "\25AA";
  position: absolute;
  left: 0;
  color: var(--accent-cyan);
}
@media (max-width: 900px) {
  .featlist-grid { grid-template-columns: 1fr; }
}

.hero-mobile-nav { display: none; padding-top: 1.0rem; }

@media (max-width: 768px) {
  .hero-mobile-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
  }
  .hero-mobile-nav a {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 180ms ease;
  }
  .hero-mobile-nav a:hover { color: var(--text-primary); }
}

.shot-window {
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.shot-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.shot-window-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
}
.shot-img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-shots{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
  width:100%;max-width:100%;
  margin:22px auto 0;
}
.hero-shots .shot{
  margin:0;
  width:auto;aspect-ratio:16/10;
  min-width:140px;min-height:90px;
  max-width:100%;
  resize:both;overflow:hidden;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px;
  background:rgba(255,255,255,0.04);
}
.hero-shots .shot img{
  width:100%;height:100%;
  object-fit:contain;display:block;
}
@media (max-width: 640px){
  .hero-shots{grid-template-columns:1fr;}
  .hero-shots .shot{aspect-ratio:16/10;min-height:120px;}
}
.footer-copy-version {
font-size: 0.5rem;color: var(--text-muted);text-decoration: none;padding-left: 6.0rem;
}
/* ═══════════════════════════════════════════════════════════════
   CONTACT
   ═══════════════════════════════════════════════════════════════
   The one LIGHT surface on a dark page. Every other section is a
   dark card on a darker background, which is right for reading and
   wrong for typing: a dark input reads as disabled, and the caret
   is hard to find. Inverting the panel makes it unmistakably a
   place to enter something, and gives the page a visual full stop
   after the closing CTA.

   Colours are literal rather than token based on purpose. The
   palette in app.css defines ONE theme, a dark one; --text-primary
   is #e8ecf4 and would be invisible here. Reusing those names for
   an inverted surface would make the tokens mean two opposite
   things depending on where they are read. */

.alpha-section-contact {
  padding: 0 0 6rem;
  position: relative;
  z-index: 1;
}

.contact-panel {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  background: #f4f6fb;
  border: 1px solid #d7dced;
  border-radius: 16px;
  /* Lifted off the dark background rather than outlined, so the
     panel reads as sitting above the page. */
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
}

.contact-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

.contact-lede {
  font-size: 1rem;
  line-height: 1.6;
  color: #4b5565;
  margin-bottom: 1.75rem;
}

.contact-field { margin-bottom: 1.25rem; }

.contact-field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.4rem;
}

.contact-field input,
.contact-field textarea {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: #111827;
  background: #ffffff;
  border: 1px solid #c3cadb;
  border-radius: 8px;
  /* Vertical only: horizontal resize breaks the panel width. */
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder { color: #98a2b3; }

.contact-field input:focus,
.contact-field textarea:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 1px;
  border-color: var(--accent-blue);
}

/* Only after a submit attempt. Marking a field invalid while it is
   still being filled in scolds the visitor mid-keystroke. */
.contact-form.was-submitted .contact-field input:invalid,
.contact-form.was-submitted .contact-field textarea:invalid {
  border-color: var(--accent-red);
}

.contact-error {
  font-size: 0.9rem;
  color: #b42318;
  margin-bottom: 1rem;
}

.contact-submit { width: 100%; }

.contact-note {
  font-size: 0.8125rem;
  color: #667085;
  text-align: center;
  margin-top: 0.85rem;
}

@media (max-width: 640px) {
  .contact-panel { padding: 1.75rem 1.25rem; }
}


/* ================================================================
   Homepage section spacing (3.3.12, unchanged in 3.3.13)
   ================================================================
   Halves four gaps on index.html. The ids and classes named here
   (#showcase-pos, .hero, #how-it-works, #features, .alpha-section-cta,
   #contact) occur only on the homepage, so the base .alpha-section,
   .hero and CTA paddings are unchanged for any other page. Values are
   half of the desktop composition each gap had before (padding plus
   the trailing margin inside the hero). These rules come last in the
   file and use ids or equal specificity, so they also win over the
   768px media re-sets above; small screens get the same halved gaps.
   ================================================================ */

/* showcase-pos to hero: was 1.5rem + 3rem, now 0.75rem + 1.5rem */
#showcase-pos { padding-bottom: 0.75rem; }
#showcase-pos + .hero { padding-top: 1.5rem; }

/* hero to how-it-works: was 2rem (hero-cta) + 3rem + 4rem, now 1rem + 1.5rem + 2rem */
.hero .hero-cta { margin-bottom: 1rem; }
.hero + #how-it-works { padding-top: 2rem; }
#how-it-works { padding-top: 2rem; }
.hero { padding-bottom: 1.5rem; }

/* features to CTA: was 4rem + 5rem, now 2rem + 2.5rem */
#features { padding-bottom: 2rem; }
.alpha-section-cta { padding-top: 2.5rem; }

/* CTA to contact: was 6rem + 0, now 3rem + 0 */
.alpha-section-cta { padding-bottom: 3rem; }