/* connorbower.com – shared styles for every opt-in page.
   Light and airy: a cool off-white ground, white surfaces, near-black ink.
   Lime #D3FF31 is the one fixed brand colour (from Wyler). On a light ground it is only ever a fill
   (the selected outcome, the button, ticks), never text, because lime text can't be read on white. */

:root {
  --bg: #f5f6f1;
  --surface: #ffffff;
  --surface-2: #eceee6;
  --line: #e0e3d9;
  --line-strong: #cdd1c5;

  --ink: #10130c;
  --ink-soft: #4d5347;
  --ink-faint: #676d62;

  --lime: #d3ff31;
  --lime-ink: #11150a;
  --lime-soft: #f1ffc2;

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 8px;    /* inputs, buttons, chips */
  --r-lg: 14px;   /* frames, panels */
  --gutter: clamp(20px, 5vw, 64px);
  --max: 1240px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* Shadows tinted to the ground, with offset and blur. */
  --e1: 0 1px 2px rgb(40 48 20 / 0.06), 0 4px 12px -4px rgb(40 48 20 / 0.08);
  --e2: 0 2px 4px rgb(40 48 20 / 0.05), 0 18px 40px -16px rgb(40 48 20 / 0.22);
  --e3: 0 4px 10px rgb(40 48 20 / 0.06), 0 40px 80px -30px rgb(40 48 20 / 0.35);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
a:hover { text-decoration-color: currentColor; }

::selection { background: var(--lime); color: var(--lime-ink); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Type ---------- */

.display {
  font-family: var(--font-display);
  font-variation-settings: "wdth" 86;
  font-stretch: 86%;
  font-weight: 760;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
  margin: 0;
}

h1.display { font-size: clamp(2.3rem, 1.4rem + 2.3vw, 3.5rem); }
h2.display { font-size: clamp(2rem, 1.3rem + 2vw, 3.1rem); line-height: 1.06; }

/* The outcome in a headline reads as a selected clip on a timeline. */
.selected {
  background: var(--lime);
  color: var(--lime-ink);
  padding: 0 0.12em;
  margin: 0 -0.03em;
  border-radius: 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.eyebrow { margin: 0 0 22px; font-size: 16px; font-weight: 500; color: var(--ink-soft); }

.lede { margin: 28px 0 0; font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 33em; text-wrap: pretty; }
.lede strong { color: var(--ink); font-weight: 600; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ---------- Brand bar ---------- */

.brandbar { padding-block: 28px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 90;
  font-stretch: 90%;
  font-weight: 760;
  font-size: 19px;
  letter-spacing: -0.015em;
  text-decoration: none;
}
.wordmark__mark {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--lime); color: var(--lime-ink);
  border-radius: var(--r-sm);
  font-size: 14px; letter-spacing: -0.03em;
}

/* ---------- Opt-in form ---------- */

.optin { margin-top: 44px; max-width: 34rem; }
.optin__row { display: flex; gap: 10px; }
.optin__input {
  flex: 1 1 auto; min-width: 0;
  height: 60px;
  padding: 0 20px;
  font: 500 17px/1 var(--font-text);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--e1);
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.optin__input::placeholder { color: #80867a; }
.optin__input:hover { border-color: #b3b8aa; }
.optin__input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgb(211 255 49 / 0.75); }
.optin__input[aria-invalid="true"] { border-color: #c2410c; }

.btn {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  height: 60px;
  padding: 0 26px;
  font-family: var(--font-display);
  font-variation-settings: "wdth" 95;
  font-stretch: 95%;
  font-weight: 740;
  font-size: 17.5px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: var(--lime-ink);
  background: var(--lime);
  border: 1px solid rgb(17 21 10 / 0.12);
  border-radius: var(--r-sm);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 1px 2px rgb(40 48 20 / 0.12), 0 10px 22px -12px rgb(110 140 0 / 0.55);
  transition: transform 140ms var(--ease-out), background-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #c9f81c; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 4px rgb(40 48 20 / 0.12), 0 16px 28px -14px rgb(110 140 0 / 0.6); }
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn[disabled] { cursor: progress; opacity: 0.7; transform: none; }

.optin__small { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-faint); max-width: 32rem; }
.optin__error { margin: 12px 0 0; font-size: 15px; color: #b3380a; }
.optin__error:empty { display: none; }

/* After submit: the form is replaced with what happens next. */
.thanks { max-width: 34rem; margin-top: 44px; padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e2); }
.thanks h2, .thanks h3 { margin: 0; font-family: var(--font-display); font-variation-settings: "wdth" 88; font-stretch: 88%; font-weight: 780; font-size: 27px; line-height: 1.1; letter-spacing: -0.02em; outline: none; }
.thanks p { margin: 10px 0 0; color: var(--ink-soft); }
.thanks strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.thanks ol { margin: 16px 0 0; padding-left: 22px; color: var(--ink-soft); }
.thanks li { margin: 5px 0; padding-left: 4px; }
.thanks li::marker { font-family: var(--font-mono); color: var(--ink); }

@media (max-width: 560px) {
  .optin__row { flex-direction: column; }
  .btn { width: 100%; }
}

/* ---------- Facts: three small callouts ---------- */

.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; padding: 0; list-style: none; }
.facts li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 10px;
  font-size: 14.5px; line-height: 1.3;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.facts svg { width: 18px; height: 18px; flex: none; color: var(--ink); }
.facts b { color: var(--ink); font-weight: 600; }

/* ---------- Frames: a real still from an edit, with a fixed aspect ratio set by its container ---------- */

.frame { margin: 0; overflow: hidden; background: var(--surface-2); border-radius: var(--r-lg); box-shadow: var(--e3); outline: 1px solid rgb(16 19 12 / 0.06); outline-offset: -1px; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Sections ---------- */

.section { padding-block: clamp(96px, 12vw, 176px); }

.footer { padding-block: 32px 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-faint); }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.footer a { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
.nowrap { white-space: nowrap; }