/* Palimem marketing site — styles.css
   Fonts: Fraunces (display), IBM Plex Sans (UI), IBM Plex Mono (code) via Google Fonts CDN.
   Dark mode is the default; light mode is via prefers-color-scheme.
   Design tokens: see marketing/docs-site/src/styles/custom.css
*/

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --ink:          #0F1419;
  --parchment:    #F4F0E8;
  --layer-1:      #2A3340;
  --layer-2:      #3D4F66;
  --layer-3:      #5C7A99;
  --accent:       #C9A227;
  --accent-hover: #E0B83D;
  --truth:        #E8E4DC;
  --muted:        #6B7280;
  --success:      #3D8B6E;
  --border:       rgba(42, 51, 64, 0.2);

  /* Dark mode (default) surface mappings */
  --bg:           var(--ink);
  --bg-card:      var(--layer-1);
  --bg-nav:       rgba(15, 20, 25, 0.92);
  --text:         var(--truth);
  --text-muted:   #9AA5B4;
  --text-heading: #F0EDE8;
  --divider:      rgba(92, 122, 153, 0.25);

  --font-display: 'Fraunces', Georgia, serif;
  --font-ui:      'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'Cascadia Code', monospace;

  --max-w:        1120px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --transition:   160ms ease;
}

/* ── Light mode ───────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:           var(--parchment);
    --bg-card:      #FFFFFF;
    --bg-nav:       rgba(244, 240, 232, 0.92);
    --text:         var(--ink);
    --text-muted:   #4B5563;
    --text-heading: var(--ink);
    --divider:      rgba(42, 51, 64, 0.15);
  }

  .strata__tag {
    color:      var(--text-muted);
    background: rgba(42, 51, 64, 0.06);
  }

  .strata__fact--old {
    color: rgba(75, 85, 99, 0.9);
  }
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:      var(--font-ui);
  font-size:        1.125rem;
  line-height:      1.65;
  background-color: var(--bg);
  color:            var(--text);
  min-height:       100vh;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* Reset native <button> chrome — required for custom styles in Chrome/Safari */
button {
  -webkit-appearance: none;
  appearance: none;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family:  var(--font-display);
  color:        var(--text-heading);
  line-height:  1.1;
  font-weight:  600;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; font-family: var(--font-ui); font-weight: 600; }

p { max-width: 65ch; }
code, kbd, pre {
  font-family: var(--font-mono);
  font-size:   0.9em;
}

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.container {
  width:   100%;
  max-width: var(--max-w);
  margin:  0 auto;
  padding: 0 1.5rem;
}

section { padding: 5rem 0; }

/* ── Navigation ───────────────────────────────────────────────────────────── */
.nav {
  position:         sticky;
  top:              0;
  z-index:          100;
  background-color: var(--bg-nav);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:    1px solid var(--divider);
}

.nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          64px;
  gap:             2rem;
}

.nav__logo {
  font-family:     var(--font-display);
  font-size:       1.35rem;
  font-weight:     600;
  color:           var(--text-heading);
  text-decoration: none;
  letter-spacing:  -0.01em;
  display:         flex;
  align-items:     center;
  gap:             0.5rem;
}

.nav__logo-icon {
  display:       flex;
  flex-direction: column;
  gap:           3px;
  width:         20px;
  flex-shrink:   0;
}
.nav__logo-icon span {
  display:       block;
  height:        2px;
  border-radius: 2px;
}
.nav__logo-icon span:nth-child(1) { background: var(--layer-3); width: 100%; }
.nav__logo-icon span:nth-child(2) { background: var(--layer-2); width: 75%; }
.nav__logo-icon span:nth-child(3) { background: var(--accent);  width: 100%; }

.nav__links {
  display:     flex;
  align-items: center;
  gap:         1.75rem;
  list-style:  none;
}

.nav__links a {
  font-size:       0.9375rem;
  font-family:     var(--font-ui);
  font-weight:     500;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color var(--transition);
}
.nav__links a:hover { color: var(--text); }

.btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  gap:              0.4rem;
  padding:          0.55rem 1.25rem;
  border-radius:    var(--radius-sm);
  font-family:      var(--font-ui);
  font-weight:      600;
  font-size:        0.9375rem;
  text-decoration:  none;
  cursor:           pointer;
  border:           none;
  transition:       background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  white-space:      nowrap;
}

.btn--primary {
  background-color: var(--accent);
  color:            var(--ink);
}
.btn--primary:hover {
  background-color: var(--accent-hover);
  box-shadow:       0 0 0 3px rgba(201, 162, 39, 0.25);
}

.btn--secondary {
  background-color: transparent;
  color:            var(--layer-3);
  border:           1.5px solid var(--layer-3);
}
.btn--secondary:hover {
  color:            var(--truth);
  border-color:     var(--truth);
}

.btn--large {
  padding:    0.75rem 1.75rem;
  font-size:  1rem;
}

/* ── Hero section ─────────────────────────────────────────────────────────── */
.hero {
  padding:        4.5rem 0 5rem;
  position:       relative;
  overflow:       hidden;
}

.hero__inner {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            4rem;
  align-items:    center;
}

.hero__content { position: relative; z-index: 2; }

.hero__eyebrow {
  display:          inline-flex;
  align-items:      center;
  gap:              0.5rem;
  font-family:      var(--font-mono);
  font-size:        0.8125rem;
  font-weight:      500;
  color:            var(--accent);
  letter-spacing:   0.06em;
  text-transform:   uppercase;
  margin-bottom:    1rem;
}

.hero__headline {
  margin-bottom: 1.25rem;
}

.hero__headline em {
  font-style: italic;
  color:       var(--accent);
}

.hero__subhead {
  font-size:     1.125rem;
  color:         var(--text-muted);
  margin-bottom: 2rem;
  max-width:     48ch;
  line-height:   1.7;
}

.hero__actions {
  display:    flex;
  gap:        1rem;
  flex-wrap:  wrap;
  align-items: center;
}

/* ── CSS Strata illustration ──────────────────────────────────────────────── */
.strata-wrap {
  margin: 0;
}

.strata {
  position:       relative;
  width:          100%;
  aspect-ratio:   4 / 3;
  border-radius:  var(--radius-md);
  overflow:       hidden;
  background-color: var(--layer-1);
  box-shadow:     0 24px 80px rgba(0,0,0,0.45), 0 0 0 1px var(--divider);
}

.strata__layer {
  position:   absolute;
  left:       0;
  right:      0;
  border:     none;
  padding:    0 1.25rem;
  margin:     0;
  cursor:     pointer;
  text-align: left;
  font:       inherit;
  color:      inherit;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  gap:        0.75rem;
  transition: filter var(--transition), opacity var(--transition), box-shadow var(--transition);
}

.strata__layer:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: -2px;
  z-index:        5;
}

.strata__layer:not(.is-active):not(:hover) {
  opacity: 0.92;
}

.strata__layer.is-active,
.strata__layer:hover {
  z-index:    4;
  filter:     brightness(1.08);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.35);
}

/* Deepest layer */
.strata__layer--1 {
  bottom:     0;
  height:     22%;
  z-index:    1;
  background: var(--layer-1);
  border-top: 1px solid rgba(92, 122, 153, 0.12);
}

/* Mid layers */
.strata__layer--2 {
  bottom:     22%;
  height:     25%;
  z-index:    2;
  background: linear-gradient(180deg, var(--layer-2) 0%, rgba(61, 79, 102, 0.85) 100%);
  border-top: 1px solid rgba(92, 122, 153, 0.2);
}

.strata__layer--3 {
  bottom:     47%;
  height:     28%;
  z-index:    3;
  background: linear-gradient(180deg, var(--layer-3) 0%, var(--layer-2) 100%);
  border-top: 1px solid rgba(92, 122, 153, 0.35);
}

/* Top / truth layer */
.strata__layer--top {
  bottom:     75%;
  height:     25%;
  z-index:    4;
  background: linear-gradient(180deg, var(--truth) 0%, rgba(232, 228, 220, 0.9) 100%);
  border-top: 2px solid var(--accent);
}

.strata__fact {
  font-family: var(--font-mono);
  font-size:   clamp(0.65rem, 2vw, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strata__fact--old {
  color:       rgba(154, 165, 180, 0.85);
  text-decoration: line-through;
  text-decoration-color: rgba(201, 162, 39, 0.55);
}

.strata__fact--current {
  color: var(--ink);
  font-weight: 600;
}

.strata__tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size:   0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:       rgba(154, 165, 180, 0.75);
  padding:     0.2rem 0.45rem;
  border-radius: 4px;
  background:  rgba(15, 20, 25, 0.25);
}

.strata__tag--truth {
  color:            var(--ink);
  background:       rgba(201, 162, 39, 0.22);
  border:           1px solid rgba(201, 162, 39, 0.45);
}

.strata__accent-line {
  position:   absolute;
  left:       0;
  right:      0;
  top:        0;
  height:     2px;
  background: var(--accent);
  pointer-events: none;
}

.strata__caption {
  margin-top:  0.875rem;
  font-size:   0.875rem;
  color:       var(--text-muted);
  line-height: 1.55;
  text-align:  center;
  max-width:   42ch;
  margin-left: auto;
  margin-right: auto;
}

.strata__caption strong {
  color: var(--accent);
  font-weight: 600;
}

/* Parallax drift — respects prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .strata__layer--1 { animation: drift-1 18s ease-in-out infinite alternate; }
  .strata__layer--2 { animation: drift-2 22s ease-in-out infinite alternate; }
  .strata__layer--3 { animation: drift-3 26s ease-in-out infinite alternate; }

  @keyframes drift-1 {
    from { transform: translateX(0); }
    to   { transform: translateX(4px); }
  }
  @keyframes drift-2 {
    from { transform: translateX(0); }
    to   { transform: translateX(-5px); }
  }
  @keyframes drift-3 {
    from { transform: translateX(0); }
    to   { transform: translateX(3px); }
  }
}

/* ── Section header ───────────────────────────────────────────────────────── */
.section-header {
  margin-bottom: 3rem;
  text-align:    center;
}

.section-header h2 { margin-bottom: 0.75rem; }

.section-header p {
  color:     var(--text-muted);
  font-size: 1.0625rem;
  margin:    0 auto;
}

/* ── Problem section ──────────────────────────────────────────────────────── */
.problem { background-color: var(--layer-1); }

.problem__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   2rem;
}

.problem__card {
  padding:       2rem 1.75rem;
  border-radius: var(--radius-md);
  background:    var(--bg-card);
  border:        1px solid var(--divider);
}

.problem__icon {
  width:         40px;
  height:        40px;
  border-radius: 10px;
  background:    rgba(201, 162, 39, 0.1);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 1rem;
  color:         var(--accent);
  font-size:     1.25rem;
}

.problem__card h3 { margin-bottom: 0.6rem; }
.problem__card p  { font-size: 1rem; color: var(--text-muted); max-width: 100%; }

/* ── Capability pillars ───────────────────────────────────────────────────── */
.pillars__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.5rem;
}

.pillar {
  padding:        1.75rem 1.5rem;
  border-radius:  var(--radius-md);
  background:     var(--bg-card);
  border:         1px solid var(--divider);
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
  text-decoration: none;
  transition:     border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.pillar:hover {
  border-color: var(--layer-3);
  box-shadow:   0 8px 32px rgba(0, 0, 0, 0.2);
  transform:    translateY(-2px);
}

.pillar__num {
  font-family:   var(--font-mono);
  font-size:     0.75rem;
  color:         var(--accent);
  font-weight:   500;
  letter-spacing: 0.06em;
}

.pillar h3 { font-size: 1.0625rem; color: var(--text-heading); }

.pillar p {
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: 1.55;
  max-width:   100%;
}

.pillar__arrow {
  margin-top:  auto;
  font-size:   0.875rem;
  color:       var(--layer-3);
  font-weight: 500;
}

/* ── Connect section ──────────────────────────────────────────────────────── */
.connect { background-color: var(--layer-1); }

.connect__picker {
  max-width: 720px;
  margin:    0 auto;
}

.connect__filters {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.5rem;
  justify-content: center;
  margin-bottom:   1.5rem;
}

.connect__filter {
  padding:         0.4rem 0.9rem;
  border-radius:   99px;
  border:          1px solid var(--divider);
  background-color: var(--bg-card);
  color:           var(--text-muted);
  font-family:     var(--font-mono);
  font-size:       0.8125rem;
  font-weight:     500;
  cursor:          pointer;
  transition:      background-color var(--transition), color var(--transition), border-color var(--transition);
}

.connect__filter:hover {
  color:        var(--text);
  border-color: var(--layer-3);
}

.connect__filter.is-active {
  background:   rgba(201, 162, 39, 0.12);
  border-color: var(--accent);
  color:        var(--accent);
}

.connect__filter:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

.connect__badges {
  display:         flex;
  flex-wrap:       wrap;
  gap:             0.65rem;
  justify-content: center;
  margin-bottom:   1.5rem;
  list-style:      none;
  padding:         0;
}

.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             0.5rem;
  padding:         0.5rem 0.95rem;
  border-radius:   99px;
  font-family:     var(--font-ui);
  font-size:       0.875rem;
  font-weight:     500;
  text-decoration: none;
  border:          1px solid;
  cursor:          pointer;
  background:      transparent;
  transition:      background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.badge__name { line-height: 1.2; }

.badge__method {
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  font-weight:    500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity:        0.75;
}

.badge--tier-a {
  border-color:     var(--accent);
  color:            var(--accent);
  background-color: rgba(201, 162, 39, 0.08);
}
.badge--tier-a:hover,
.badge--tier-a.is-selected {
  background-color: rgba(201, 162, 39, 0.2);
  box-shadow:       0 0 0 2px rgba(201, 162, 39, 0.2);
}

.badge--tier-b {
  border-color:     var(--layer-3);
  color:            var(--text-heading);
  background-color: rgba(92, 122, 153, 0.12);
}
.badge--tier-b:hover,
.badge--tier-b.is-selected {
  background-color: rgba(92, 122, 153, 0.28);
  box-shadow:       0 0 0 2px rgba(92, 122, 153, 0.25);
}

.badge.is-selected {
  transform: translateY(-1px);
}

.badge:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}

.badge[hidden] { display: none; }

.connect__detail {
  border-radius: var(--radius-md);
  background:    var(--bg-card);
  border:        1px solid var(--divider);
  overflow:      hidden;
}

.connect__detail-inner {
  padding: 1.5rem 1.75rem;
}

.connect__detail-head {
  display:       flex;
  align-items:   center;
  gap:           0.75rem;
  flex-wrap:     wrap;
  margin-bottom: 0.65rem;
}

.connect__detail-method {
  font-family:    var(--font-mono);
  font-size:      0.6875rem;
  font-weight:    600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--accent);
  padding:        0.25rem 0.5rem;
  border-radius:  4px;
  background:     rgba(201, 162, 39, 0.12);
  border:         1px solid rgba(201, 162, 39, 0.25);
}

.connect__detail-title {
  font-family: var(--font-display);
  font-size:   1.25rem;
  margin:      0;
}

.connect__detail-blurb {
  font-size:     0.9375rem;
  color:         var(--text-muted);
  line-height:   1.6;
  margin-bottom: 1rem;
  max-width:     100%;
}

.connect__detail-blurb code {
  font-size: 0.85em;
  color:     var(--text-heading);
}

.connect__detail-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.35rem;
  font-size:       0.9375rem;
  font-weight:     600;
  color:           var(--accent);
  text-decoration: none;
}

.connect__detail-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Trust / proof section ────────────────────────────────────────────────── */
.trust { background-color: var(--bg); }

.trust__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1.5rem;
}

.trust__badge {
  padding:       1.5rem;
  border-radius: var(--radius-md);
  background:    var(--bg-card);
  border:        1px solid var(--divider);
  text-align:    center;
}

.trust__value {
  font-family:   var(--font-mono);
  font-size:     1.5rem;
  font-weight:   500;
  color:         var(--text-heading);
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           0.4rem;
  margin-bottom: 0.35rem;
}

.trust__dot {
  width:            8px;
  height:           8px;
  border-radius:    50%;
  background-color: var(--success);
  flex-shrink:      0;
}

.trust__label {
  font-size:  0.8125rem;
  color:      var(--text-muted);
  font-family: var(--font-ui);
}

/* ── FAQ section ──────────────────────────────────────────────────────────── */
.faq { background-color: var(--layer-1); }

.faq__list {
  max-width:  720px;
  margin:     0 auto;
  display:    flex;
  flex-direction: column;
  gap:        0.75rem;
}

.faq__item {
  border-radius: var(--radius-md);
  background:    var(--bg-card);
  border:        1px solid var(--divider);
  overflow:      hidden;
}

.faq__question {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1.125rem 1.5rem;
  width:           100%;
  background:      transparent;
  border:          none;
  color:           var(--text-heading);
  font-family:     var(--font-ui);
  font-size:       1rem;
  font-weight:     600;
  text-align:      left;
  cursor:          pointer;
  transition:      background-color var(--transition);
}

.faq__question:hover { background-color: rgba(92, 122, 153, 0.06); }

.faq__chevron {
  flex-shrink: 0;
  color:       var(--text-muted);
  transition:  transform var(--transition);
  font-size:   0.75rem;
}

.faq__item[open] .faq__chevron,
.faq__item.is-open .faq__chevron { transform: rotate(180deg); }

.faq__answer {
  padding:     0 1.5rem 1.25rem;
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: 1.7;
}

.faq__answer p + p { margin-top: 0.5rem; }

.faq__answer a {
  color:           var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* ── Footer CTA section ───────────────────────────────────────────────────── */
.cta-section {
  background:    linear-gradient(135deg, var(--layer-1) 0%, var(--ink) 100%);
  border-top:    1px solid var(--divider);
  padding:       5rem 0;
  text-align:    center;
}

.cta-section h2 {
  margin-bottom: 0.875rem;
}

.cta-section p {
  color:         var(--text-muted);
  margin:        0 auto 2rem;
  font-size:     1.0625rem;
}

.cta-section__actions {
  display:     flex;
  gap:         1rem;
  flex-wrap:   wrap;
  align-items: center;
  justify-content: center;
}

.cta-section__waitlist {
  font-size:       0.875rem;
  color:           var(--text-muted);
  text-decoration: none;
}
.cta-section__waitlist:hover { color: var(--text); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background:    var(--ink);
  border-top:    1px solid var(--divider);
  padding:       2.5rem 0;
}

.site-footer__inner {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             1.5rem;
}

.site-footer__tagline {
  font-family:  var(--font-display);
  font-size:    1.0625rem;
  color:        var(--truth);
  font-style:   italic;
}

.site-footer__links {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1.25rem;
  list-style: none;
}

.site-footer__links a {
  font-size:       0.875rem;
  color:           var(--text-muted);
  text-decoration: none;
  font-family:     var(--font-ui);
  transition:      color var(--transition);
}
.site-footer__links a:hover { color: var(--truth); }

.site-footer__legal {
  width:      100%;
  font-size:  0.8125rem;
  color:      var(--muted);
  font-family: var(--font-mono);
  margin-top: 0.5rem;
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
.sr-only {
  position:  absolute;
  width:     1px;
  height:    1px;
  padding:   0;
  margin:   -1px;
  overflow:  hidden;
  clip:      rect(0,0,0,0);
  white-space: nowrap;
  border:    0;
}

.text-center { text-align: center; }
.mt-sm { margin-top: 0.75rem; }
.mt-md { margin-top: 1.5rem; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pillars__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero__inner { grid-template-columns: 1fr; }
  .strata { aspect-ratio: 16 / 10; }
  .strata__fact { font-size: 0.6rem; }
  .strata__tag { font-size: 0.55rem; padding: 0.15rem 0.35rem; }
  .problem__grid { grid-template-columns: 1fr; }
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .nav__links { display: none; }
  .nav__links--actions { display: flex; }
}

@media (max-width: 480px) {
  .trust__grid { grid-template-columns: 1fr; }
  .pillars__grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .cta-section__actions { flex-direction: column; }
}