/* Casual Outbounds strategy pages.

   Every value here was read off the live site at casualoutbounds.framer.ai
   on 2026-09-22 rather than guessed, so these pages and the site share one
   type scale and one palette.

     Inter Display  headings, 600 and 700
     Switzer        body, 500 throughout
     Lexend Exa     the wordmark only

   Two substitutions worth knowing about. Inter Display is bundled by Framer
   and is not distributed on its own, so this loads Inter and reproduces the
   look with the site's own letter-spacing values, which is where almost all
   of the difference lives at these sizes. Switzer comes from Fontshare and
   falls back to Inter if that CDN is ever unreachable. */

:root {
  color-scheme: light;

  --ink:    #101011;   /* headings */
  --body:   #2a2c28;   /* paragraph text */
  --muted:  #5a6654;   /* leads and subheads */
  --faint:  #a2a89a;   /* the quietest text on the site */

  --lime:       #c3ec3a;
  --green-dark: #548d38;

  --line: #e6e4dc;
  --card: #ffffff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  /* White underneath with the site's own hero wash laid over the top of the
     page. Same stops and same opacities as the homepage, just sized to a
     shorter page. */
  background-color: #fff;
  background-image: linear-gradient(
    180deg,
    #ffffff 0.5%,
    rgba(195, 236, 58, .30) 24%,
    rgba(84, 141, 56, .30) 79%,
    #ffffff 100%);
  background-repeat: no-repeat;
  background-position: 0 80px;
  background-size: 100% 1050px;
  font-family: "Switzer", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 500;
  color: var(--body);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 26px 30px 140px;
}
body > * { flex: none; }

/* ---------- brand bar ---------- */

.bar {
  width: 100%;
  max-width: 1350px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 64px;
}

.logo {
  font-family: "Lexend Exa", sans-serif;
  font-weight: 400;
  font-size: clamp(22px, 4.4vw, 36px);
  letter-spacing: -0.17em;
  padding-right: 0.16em;
  background: radial-gradient(circle at 20% 50%, var(--lime) 0%, var(--green-dark) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  text-decoration: none;
}

.pill {
  background: var(--ink);
  color: #fff;
  font-family: "Switzer", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 11px 20px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.pill:hover { background: #2a2c28; }

/* ---------- headline ---------- */

.head {
  text-align: center;
  max-width: 700px;
  margin-bottom: 44px;
}
.head h1 {
  font-family: "Inter", sans-serif;
  font-variation-settings: "opsz" 32;
  font-size: clamp(38px, 7.4vw, 70px);
  font-weight: 600;
  letter-spacing: -0.048em;   /* site runs -0.04em */
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 18px;
}
.head p {
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}

/* ---------- video ---------- */

.video {
  width: 100%;
  max-width: 820px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #17171a;
  box-shadow: 0 30px 60px -24px rgba(40, 60, 10, .45);
  margin-bottom: 60px;
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video[hidden] { display: none; }

/* ---------- section heading ---------- */

.section {
  width: 100%;
  max-width: 760px;
  text-align: center;
  margin-bottom: 40px;
}
.section h2 {
  font-family: "Inter", sans-serif;
  font-variation-settings: "opsz" 32;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.032em;   /* site leaves this at normal */
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 12px;
}
.section p {
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--muted);
  margin: 0;
}

/* ---------- numbered rows ----------
   The site numbers its questions 01, 02, 03 down the left with the title and
   body to the right. Reused here for the timeline and for the question
   groups, so the pages read as the same thing rather than as a lookalike. */

.rows {
  width: 100%;
  max-width: 760px;
  list-style: none;
  margin: 0 0 50px;
  padding: 0;
}

.row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 4px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }

.row-num {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--body);
}
.row.now .row-num { color: var(--green-dark); }

.row h3 {
  font-family: "Inter", sans-serif;
  font-variation-settings: "opsz" 32;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.032em;   /* site runs -0.02em */
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.row p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.55;
  color: var(--body);
  margin: 0;
}
.row p + p { margin-top: 12px; }

.now-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-dark);
  background: rgba(195, 236, 58, .45);
  border-radius: 999px;
  padding: 4px 10px;
}

.row ul { margin: 0; padding-left: 19px; }
.row li {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.55;
  color: var(--body);
  margin-bottom: 9px;
}
.row li:last-child { margin-bottom: 0; }

/* ---------- call to action ---------- */

.cta {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  font-family: "Switzer", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.02em;
  padding: 17px 36px;
  border-radius: 999px;
  text-decoration: none;
}
.cta:hover { background: #2a2c28; }

.cta-note {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--muted);
  margin: 14px 0 0;
  text-align: center;
}

/* ---------- plain card, for blocks that are not a numbered list ---------- */

.card {
  width: 100%;
  max-width: 760px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 30px;
  margin-bottom: 40px;
}
.card p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.55;
  color: var(--body);
  margin: 0 0 14px;
}
.card p:last-child { margin-bottom: 0; }


/* ---------- on-appear animations ----------

   Scoped to .js, which anim.js's companion line in the head sets. Without
   JavaScript that class never arrives, the rules below never apply, and the
   page renders fully visible instead of blank. */

.js [data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}
.js [data-anim="scale"] { transform: scale(.94); }
.js [data-anim="up"]    { transform: translateY(24px); }

.js [data-anim].in {
  opacity: 1;
  transform: none;
  transition:
    opacity .72s cubic-bezier(.22, .61, .36, 1),
    transform .72s cubic-bezier(.22, .61, .36, 1);
}

/* Somebody who has asked their system to reduce motion gets the page with no
   movement at all rather than a faster version of the same thing. */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim],
  .js [data-anim].in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 560px) {
  .bar { margin-bottom: 44px; }
  .row { grid-template-columns: 34px 1fr; padding: 22px 0; }
  .card { padding: 22px 20px; }
}