@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    local("Hanken Grotesk Regular"),
    local("HankenGrotesk-Regular"),
    url("fonts/hanken-grotesk-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Hanken Grotesk Bold"),
    local("HankenGrotesk-Bold"),
    url("fonts/hanken-grotesk-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    local("Sora Bold"),
    local("Sora-Bold"),
    url("fonts/sora-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src:
    local("Sora ExtraBold"),
    local("Sora-ExtraBold"),
    url("fonts/sora-latin-800.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ocap-accent: #3DA5FF;
  --ocap-accent-soft: #7cc4ff;
  --ocap-bg: #fbfdff;
  --ocap-surface: #fff;
  --ocap-text: #15171c;
  --ocap-muted: #5a6172;
  --ocap-strong-muted: #3b4252;
  --ocap-border: rgba(16,24,40,.1);
  --ocap-gradient: linear-gradient(90deg,#3DA5FF,#7cc4ff);
  --ocap-head: "Sora", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ocap-body: "Hanken Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ocap-sticky-offset: 0px;
  --ocap-floating-z: 10000000;
}

.ocap-card,
.ocap-card * {
  box-sizing: border-box;
}

.ocap-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 28px auto;
  overflow: hidden;
  color: var(--ocap-text);
  font-family: var(--ocap-body);
  background: var(--ocap-surface);
  border: 1px solid var(--ocap-border);
  border-radius: 16px;
  box-shadow: 0 14px 40px -24px rgba(16,24,40,.35);
}

.ocap-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--ocap-gradient);
}

.ocap-card-body {
  display: grid;
  grid-template-columns: minmax(92px,118px) minmax(0,1fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
}

.ocap-end_of_article .ocap-card-body,
.ocap-modal-card .ocap-card-body {
  grid-template-columns: minmax(126px,168px) minmax(0,1fr);
  gap: 28px;
  padding: 32px;
}

.ocap-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ocap-cover img {
  display: block;
  width: 100%;
  max-width: 118px;
  height: auto;
  max-height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(16,24,40,.2));
}

/* Legacy JPEG covers are flattened onto a light matte (a JPEG cannot hold
 * transparency), so on a dark card they read as a white slab with a hard edge.
 * The art sits inside a measured 4.5% x 3% frame in every one of them, so clip
 * that frame away and round the corners to the artwork's own radius. The newer
 * PNG covers are already cut out and never get this class.
 * The shadow moves to the wrapper because clip-path is applied after filter and
 * would otherwise clip the drop shadow off the image. */
.ocap-cover-matte {
  filter: drop-shadow(0 12px 20px rgba(16,24,40,.2));
}

.ocap-cover-matte img {
  clip-path: inset(3% 4.5% round 8px);
  filter: none;
}

html[data-theme="dark"] .ocap-cover-matte {
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.55));
}

.ocap-cover-large img {
  max-width: 168px;
  max-height: 235px;
}

.ocap-copy {
  min-width: 0;
}

.ocap-title {
  margin: 0 0 16px;
  color: var(--ocap-text);
  font-family: var(--ocap-head);
  font-size: clamp(1.18rem,1rem + .45vw,1.55rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: 0;
}

.ocap-title .ocap-hl {
  color: var(--ocap-accent, #3DA5FF);
}

.ocap-body {
  margin: 0 0 20px;
  color: var(--ocap-muted);
  font-size: 1rem;
  line-height: 1.45;
}

.ocap-bullets {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.ocap-bullet {
  position: relative;
  padding-left: 26px;
  color: var(--ocap-text);
  font-size: .96rem;
  line-height: 1.4;
}

.ocap-bullet::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ocap-accent, #3DA5FF);
  font-weight: 800;
}

.ocap-description {
  margin: 0 0 16px;
  color: var(--ocap-strong-muted);
  font-size: .98rem;
  line-height: 1.48;
}

.ocap-form {
  display: grid;
  gap: 10px;
}

.ocap-newsletter {
  width: 100%;
}

.ocap-newsletter .ocap-form {
  margin: 0;
}

/* In-article magnet: a compact freebie-page offer with deliberate vertical
 * rhythm so article readers can scan it without encountering a dense form. */
.ocap-in-article {
  max-width: 760px;
  margin: 40px auto;
}

.ocap-in-article .ocap-in-article-body {
  display: block;
  padding: 28px;
}

.ocap-in-article-copy {
  display: grid;
  gap: 0;
}

.ocap-in-article-kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--ocap-accent);
  font-family: var(--ocap-head);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.3;
}

.ocap-in-article-title {
  margin: 0 0 16px;
  font-size: clamp(1.35rem,1.05rem + .7vw,1.85rem);
  line-height: 1.2;
}

.ocap-in-article-description {
  margin: 0 0 18px;
}

.ocap-in-article-bullets {
  margin: 0 0 24px;
  gap: 10px;
}

.ocap-in-article-form {
  gap: 12px;
}

.ocap-in-article-label {
  color: var(--ocap-strong-muted);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.3;
}

.ocap-in-article-trust {
  margin: 2px 0 0;
  color: var(--ocap-muted);
  font-size: .84rem;
  line-height: 1.45;
}

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

.ocap-form-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: stretch;
}

.ocap-input {
  min-width: 0;
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  color: var(--ocap-text);
  font: 400 16px/1.2 var(--ocap-body);
  background: #fff;
  border: 1.5px solid rgba(16,24,40,.14);
  border-radius: 10px;
  outline: none;
}

/* Scoped to win over the theme's global input[type=email] reset (which squares
   the field inside the on-page modal); matches the button's 10px radius. */
.ocap-card .ocap-input {
  border-radius: 10px;
}

.ocap-input:focus {
  border-color: var(--ocap-accent);
  box-shadow: 0 0 0 4px rgba(61,165,255,.16);
}

.ocap-button,
.ocap-success-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  color: #fff;
  font-family: var(--ocap-head);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  background: var(--ocap-gradient);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 12px 24px -18px rgba(61,165,255,.9);
}

.ocap-button:hover,
.ocap-success-link:hover {
  color: #fff;
  filter: saturate(1.08) brightness(.98);
}

.ocap-button:focus-visible,
.ocap-success-link:focus-visible,
.ocap-referral-copy:focus-visible,
.ocap-close:focus-visible {
  outline: 3px solid rgba(61,165,255,.35);
  outline-offset: 3px;
}

.ocap-button[disabled] {
  cursor: wait;
  opacity: .72;
}

.ocap-button-large {
  width: 100%;
  margin-top: 4px;
}

/* The line under the primary CTA is the last thing read before a click, so it
 * gets the same air as the rest of the card instead of hugging the button. */
.ocap-button-large + .ocap-proof,
.ocap-button-large + .ocap-subnote {
  margin-top: 16px;
}

.ocap-newsletter .ocap-input,
.ocap-newsletter .ocap-button {
  min-height: 46px;
}

.ocap-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.ocap-proof {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 26px;
  margin-top: 10px;
  color: var(--ocap-strong-muted);
  font-size: .93rem;
  line-height: 1.2;
}

.ocap-proof strong {
  font-weight: 700;
}

.ocap-consent {
  margin-top: 14px;
  color: var(--ocap-muted);
  font-size: .78rem;
  line-height: 1.4;
}

/* Padlock on risk-reversal microcopy only. Sized to the line it sits on so it
 * reads as punctuation rather than an illustration, and it inherits the text
 * color so contrast is correct in both themes. */
.ocap-lock-icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  opacity: .75;
}

.ocap-consent.ocap-assured {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.ocap-consent.ocap-assured .ocap-lock-icon {
  margin-top: .15em;
}

.ocap-avatars {
  display: inline-flex;
  align-items: center;
  width: 50px;
  flex: 0 0 50px;
}

/* Real mini headshot photos (like standard social-proof rows). */
.ocap-avatar {
  width: 24px;
  height: 24px;
  margin-right: -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #e7eef7;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 12px -8px rgba(16,24,40,.45);
}

.ocap-avatar-a { background-image: url("data:image/jpeg;base64,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"); }
.ocap-avatar-b { background-image: url("data:image/jpeg;base64,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"); }
.ocap-avatar-c { background-image: url("data:image/jpeg;base64,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"); }

.ocap-message {
  min-height: 20px;
  color: var(--ocap-muted);
  font-size: .92rem;
  line-height: 1.35;
}

.ocap-message:empty {
  display: none;
}

html[data-theme="dark"] .ocap-card {
  --ocap-bg: #10141b;
  --ocap-surface: #1a1e27;
  --ocap-text: #f1f4f9;
  --ocap-muted: #9aa4b4;
  --ocap-strong-muted: #c6cdd9;
  --ocap-border: rgba(255,255,255,.12);
  color: var(--ocap-text) !important;
  background: var(--ocap-surface) !important;
  border-color: var(--ocap-border) !important;
  box-shadow: 0 18px 46px -28px rgba(0,0,0,.76);
}

html[data-theme="dark"] .ocap-card .ocap-title,
html[data-theme="dark"] .ocap-card .ocap-bullet,
html[data-theme="dark"] .ocap-card .ocap-success-title,
html[data-theme="dark"] .ocap-card .ocap-success-address {
  color: var(--ocap-text) !important;
}

html[data-theme="dark"] .ocap-card .ocap-body,
html[data-theme="dark"] .ocap-card .ocap-message,
html[data-theme="dark"] .ocap-card .ocap-ref,
html[data-theme="dark"] .ocap-card .ocap-subnote,
html[data-theme="dark"] .ocap-card .ocap-name-why,
html[data-theme="dark"] .ocap-card .ocap-name-status,
html[data-theme="dark"] .ocap-card .ocap-referral-body,
html[data-theme="dark"] .ocap-card .ocap-referral-more {
  color: var(--ocap-muted) !important;
}

html[data-theme="dark"] .ocap-card .ocap-referral-title,
html[data-theme="dark"] .ocap-card .ocap-name-label {
  color: var(--ocap-text) !important;
}

html[data-theme="dark"] .ocap-card .ocap-description,
html[data-theme="dark"] .ocap-card .ocap-proof,
html[data-theme="dark"] .ocap-card .ocap-success,
html[data-theme="dark"] .ocap-card .ocap-close {
  color: var(--ocap-strong-muted) !important;
}

html[data-theme="dark"] .ocap-card .ocap-title .ocap-hl,
html[data-theme="dark"] .ocap-card .ocap-bullet::before {
  color: var(--ocap-accent, #3DA5FF) !important;
}

html[data-theme="dark"] .ocap-card .ocap-input {
  color: var(--ocap-text) !important;
  background: #111720 !important;
  border-color: rgba(255,255,255,.18) !important;
}

html[data-theme="dark"] .ocap-card .ocap-input::placeholder {
  color: #8994a5;
  opacity: 1;
}

html[data-theme="dark"] .ocap-card .ocap-input:focus {
  border-color: var(--ocap-accent) !important;
  box-shadow: 0 0 0 4px rgba(61,165,255,.22) !important;
}

html[data-theme="dark"] .ocap-card .ocap-name-prompt,
html[data-theme="dark"] .ocap-card .ocap-referral-ask {
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .ocap-card .ocap-name-input {
  color: var(--ocap-text) !important;
  background: #111720 !important;
  border-color: rgba(255,255,255,.18) !important;
}

html[data-theme="dark"] .ocap-card .ocap-name-save {
  color: var(--ocap-strong-muted) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .ocap-card .ocap-name-status.ocap-name-error {
  color: #ff9b8f !important;
}

html[data-theme="dark"] .ocap-card .ocap-name-status.ocap-name-saved {
  color: #78dba8 !important;
}

html[data-theme="dark"] .ocap-card .ocap-name-save-done,
html[data-theme="dark"] .ocap-card .ocap-name-save-done[disabled] {
  color: #78dba8 !important;
  background: rgba(120,219,168,.10) !important;
  border-color: rgba(120,219,168,.34) !important;
}

html[data-theme="dark"] .ocap-card .ocap-referral-ask {
  background: transparent !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .ocap-card .ocap-referral-tap {
  color: var(--ocap-strong-muted) !important;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .ocap-card .ocap-referral-tap:hover,
html[data-theme="dark"] .ocap-card .ocap-referral-tap:focus-visible,
html[data-theme="dark"] .ocap-card .ocap-referral-more:hover,
html[data-theme="dark"] .ocap-card .ocap-referral-more:focus-visible {
  color: var(--ocap-accent, #3DA5FF) !important;
}

html[data-theme="dark"] .ocap-card .ocap-close {
  background: rgba(17,23,32,.94) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.ocap-message.ocap-error {
  color: #9b1c1c;
}

html[data-theme="dark"] .ocap-card .ocap-message.ocap-error {
  color: #ffb4b4 !important;
}

.ocap-ref {
  display: block;
  margin-top: 3px;
  color: var(--ocap-muted);
  font-size: .8rem;
}

.ocap-success {
  display: grid;
  justify-items: center;
  gap: 9px;
  color: #4a5568 !important;
  text-align: center;
}

.ocap-success-title {
  width: 100%;
  color: #16233b !important;
  font-family: var(--ocap-head);
  font-size: 1.02rem;
  line-height: 1.4;
  text-align: center;
}

.ocap-success-body {
  max-width: 42rem;
  margin: 0;
  color: inherit;
  font-size: .92rem;
  line-height: 1.55;
  text-align: center;
}

body.ocap-freebie-page .ocap-card .ocap-success,
body.ocap-freebie-page .ocap-card .ocap-success-title {
  color: var(--olhp-ink) !important;
}

.ocap-success-link {
  justify-self: center;
  width: max-content;
  max-width: 100%;
}

/* SUBSCRIBED CARD RHYTHM (measured, px, desktop; see the 480px block for
 * mobile). Floors from outliyr-platform/docs/SPACING-CONTRACT.md: card padding
 * 32px+, title to content 24px+, rows 16-20px, sections 40px+.
 *
 * One job per view: the status first, then the one reward ask, then the quiet
 * optional name line. The pending/confirmation card keeps its own grid gap and
 * its own margins, so every rule here excludes it by selector.
 *
 *   heading -> body                 24
 *   body -> address                 20
 *   address -> primary action       28
 *   section -> hairline             40 above the 1px rule, 40 below it
 *   section heading -> its line     12
 *   section line -> its button      20
 *   button -> "More ways"           20
 *   "More ways" -> share tiles      20
 *   share tile grid gutter          12
 */
.ocap-success:not(.ocap-success-pending) {
  gap: 0;
}

.ocap-success:not(.ocap-success-pending) > .ocap-success-title {
  margin: 0;
}

.ocap-success:not(.ocap-success-pending) > .ocap-success-body {
  margin: 24px 0 0;
}

/* The success card is a read-and-act surface, not a form, so it gets the full
 * 32px interior on every placement rather than the inline card's 24px. */
.ocap-card.is-success .ocap-card-body {
  padding: 32px;
}

/* Echoed straight off the form, so it reads as data, never as a heading. */
.ocap-success-address {
  display: block;
  width: 100%;
  margin: 20px 0 0;
  color: #16233b !important;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-all;
}

.ocap-success:not(.ocap-success-pending) > .ocap-success-link {
  margin-top: 28px;
}

.ocap-name-prompt {
  display: grid;
  width: 100%;
  gap: 0;
  margin-top: 40px;
  padding-top: 40px;
  text-align: left;
  border-top: 1px solid rgba(16,24,40,.12);
}

.ocap-name-form {
  display: grid;
  width: 100%;
  gap: 0;
}

/* The reason the field exists. Without it the box reads as a leftover form
   field and people type nothing (Nick, 2026-09-03). */
.ocap-name-why {
  margin: 8px 0 0;
  color: #4a5568 !important;
  font-size: .88rem;
  line-height: 1.5;
}

.ocap-name-label {
  color: #16233b !important;
  font-family: var(--ocap-head);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
}

.ocap-name-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: stretch;
  margin-top: 16px;
}

.ocap-name-input {
  min-width: 0;
  min-height: 44px;
  padding: 11px 12px;
  color: var(--ocap-text);
  font: 400 16px/1.2 var(--ocap-body);
  background: #fff;
  border: 1.5px solid rgba(16,24,40,.14);
  border-radius: 9px;
  outline: none;
}

.ocap-name-input:focus {
  border-color: var(--ocap-accent);
  box-shadow: 0 0 0 3px rgba(61,165,255,.16);
}

.ocap-name-save {
  min-height: 44px;
  padding: 11px 16px;
  color: #1e5eff;
  font-family: var(--ocap-head);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.1;
  background: #fff;
  border: 1px solid rgba(61,165,255,.32);
  border-radius: 9px;
  cursor: pointer;
}

.ocap-name-save:hover,
.ocap-name-save:focus-visible {
  color: #174ad4;
  border-color: rgba(30,94,255,.55);
}

.ocap-name-save:focus-visible {
  outline: 3px solid rgba(61,165,255,.28);
  outline-offset: 2px;
}

.ocap-name-save[disabled],
.ocap-name-input[disabled] {
  cursor: wait;
  opacity: .68;
}

.ocap-name-status {
  min-height: 1.25em;
  margin: 12px 0 0;
  color: #4a5568 !important;
  font-size: .82rem;
  line-height: 1.25;
  text-align: left;
}

/* An empty status line reserved dead space under the name row; it only needs
   height when it is actually saying something. */
.ocap-name-status:empty {
  display: none;
}

.ocap-name-status.ocap-name-error {
  color: #b42318 !important;
}

.ocap-name-status.ocap-name-saved {
  width: 100%;
  color: #207a4b !important;
  font-weight: 700;
  text-align: left;
}

/* Saved is a STATE, not a flash of text: the button keeps the check, the field
   keeps the typed name, and nothing disappears on the reader. */
.ocap-name-save-done,
.ocap-name-save-done[disabled] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #207a4b !important;
  cursor: default;
  opacity: 1;
  border-color: rgba(32,122,75,.42);
}

.ocap-check {
  display: block;
  width: 15px;
  height: 15px;
  flex: none;
}

.ocap-welcome-gift {
  display: grid;
  gap: 8px;
  margin-top: 40px;
  padding: 12px;
  background: #fffaf0;
  border: 1px solid rgba(245,158,11,.26);
  border-radius: 10px;
}

.ocap-welcome-title {
  color: #16233b !important;
  font-family: var(--ocap-head);
  font-size: .96rem;
  line-height: 1.25;
}

.ocap-welcome-discount {
  margin: 0;
  color: #4a5568 !important;
  font-size: .92rem;
  line-height: 1.35;
}

.ocap-welcome-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.ocap-welcome-code {
  display: block;
  min-width: 0;
  padding: 10px 11px;
  overflow: hidden;
  color: #2d3748 !important;
  font-family: var(--ocap-head);
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #fff;
  border: 1px solid rgba(16,24,40,.12);
  border-radius: 8px;
}

.ocap-welcome-copy {
  min-height: 38px;
  padding: 9px 13px;
  color: #fff;
  font-family: var(--ocap-head);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.1;
  background: var(--ocap-gradient);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.ocap-welcome-link {
  width: max-content;
  max-width: 100%;
  color: #1e5eff !important;
  font-family: var(--ocap-head);
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}

.ocap-referral-ask {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  gap: 0;
  margin-top: 40px;
  padding: 40px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(16,24,40,.12);
  border-radius: 0;
  text-align: center;
}

/* The ask is a SECTION now: what you get, why, then one button. It is the
   card's primary action once a person is subscribed, because there is no
   pending email left for them to open. */
.ocap-referral-row {
  display: grid;
  width: 100%;
  gap: 0;
  justify-items: stretch;
}

.ocap-referral-title {
  display: block;
  width: 100%;
  color: #16233b !important;
  font-family: var(--ocap-head);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}

.ocap-referral-body {
  margin: 12px 0 0;
  /* Host contexts (dark footer band) set light "muted" vars that ghost on the
   * panel's light background - pin readable ink. */
  color: #4a5568 !important;
  font-size: .92rem;
  line-height: 1.4;
  text-align: left;
}

.ocap-referral-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  padding: 12px 20px;
  color: #fff !important;
  font-family: var(--ocap-head);
  font-size: .96rem;
  font-weight: 700;
  line-height: 1.1;
  background: var(--ocap-gradient);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 12px 24px -18px rgba(61,165,255,.9);
}

.ocap-referral-copy:hover,
.ocap-referral-copy:focus-visible {
  color: #fff !important;
  filter: saturate(1.08) brightness(.98);
}

/* A text link, not a second button: the tiles are an afterthought, never the
 * first thing offered. 20px above it, 20px below it before the grid opens. */
.ocap-referral-more {
  justify-self: center;
  margin-top: 20px;
  padding: 4px 2px;
  color: var(--ocap-strong-muted, #3b4252) !important;
  font-family: var(--ocap-body);
  font-size: .84rem;
  line-height: 1.25;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ocap-referral-more:hover,
.ocap-referral-more:focus-visible {
  color: var(--ocap-accent, #1e7af0) !important;
}

.ocap-referral-more:focus-visible {
  outline: 3px solid rgba(61,165,255,.28);
  outline-offset: 2px;
}

.ocap-referral-taps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  gap: 12px;
  margin-top: 20px;
}

/* display:grid above outranks the UA's [hidden] rule, so restate it. */
.ocap-referral-taps[hidden] {
  display: none;
}

/* Placement-proof label color: host contexts like the footer newsletter band
 * style anchors white (.osf-newsletter a{color:#fff}) with higher specificity,
 * which turned the tap labels white-on-white. The ask panel is always a light
 * box in light mode, so pin dark ink with !important; the dark-card overrides
 * above re-pin their own colors with heavier selectors and still win. */
.ocap-referral-tap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px;
  color: var(--ocap-text, #16233b) !important;
  font-family: var(--ocap-head);
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  background: #fff;
  border: 1px solid rgba(61,165,255,.24);
  border-radius: 8px;
}

.ocap-referral-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

.ocap-referral-tap-more {
  grid-column: 1 / -1;
  cursor: pointer;
}

.ocap-referral-copy:hover,
.ocap-referral-copy:focus-visible,
.ocap-referral-tap:hover,
.ocap-referral-tap:focus-visible {
  color: var(--ocap-accent, #1e7af0) !important;
  border-color: rgba(61,165,255,.48);
  outline: 0;
}

.ocap-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--ocap-strong-muted);
  font-size: 24px;
  line-height: 1;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,24,40,.1);
  border-radius: 999px;
  cursor: pointer;
}

.ocap-slide-wrap {
  position: fixed;
  z-index: var(--ocap-floating-z);
  right: 18px;
  bottom: calc(18px + var(--ocap-sticky-offset, 0px));
  width: min(520px,calc(100vw - 36px));
}

.ocap-slide-wrap .ocap-card {
  margin: 0;
}

/* Card-padding floor: the slide-in gets the same 32px the exit modal gets, so
 * the two floating surfaces do not read as two different products. */
.ocap-slide-wrap .ocap-card-body {
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 32px;
}

/* Expanded, the slide-in is ~1000px tall and a laptop viewport is 900, so the
 * cover and the first line of the headline were sliced off the top. Cap the
 * body and let it scroll inside the card; the close button sits on the card
 * itself and stays pinned. */
.ocap-slide-wrap .ocap-card-body {
  max-height: calc(100vh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ocap-slide-wrap .ocap-cover {
  justify-content: center;
}

.ocap-slide-wrap .ocap-cover img {
  max-width: 124px;
  max-height: 184px;
}

.ocap-card.is-success .ocap-card-body {
  grid-template-columns: 1fr;
}

.ocap-slide-wrap .ocap-card.is-success .ocap-copy {
  width: 100%;
}

.ocap-slide-wrap .ocap-card.is-success .ocap-success-title {
  display: block;
  padding: 0 84px;
}

body.ocap-freebie-page .ocap-freebie-card.is-success .olhp-hero-in {
  grid-template-columns: minmax(0,520px);
  justify-content: center;
}

body.ocap-freebie-page .ocap-freebie-card.is-success .ocap-freebie-visual {
  max-width: 520px;
  justify-self: center;
}

.ocap-slide-wrap .ocap-title {
  padding-right: 32px;
  font-size: 1.05rem;
}

.ocap-slide-wrap .ocap-body {
  font-size: .94rem;
}

.ocap-slide-wrap .ocap-form-row {
  grid-template-columns: 1fr;
}

.ocap-overlay {
  position: fixed;
  z-index: var(--ocap-floating-z);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(9,15,26,.48);
  backdrop-filter: blur(4px);
}

.ocap-modal-card {
  position: relative;
  z-index: var(--ocap-floating-z);
  width: min(720px,100%);
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 36px 80px -34px rgba(16,24,40,.55);
}

.ocap-step-card .ocap-email-step {
  display: none;
}

/* Step two shows the form, so the step-one CTA and the line under it both go
 * away: the form renders its own social proof under its own button, and two
 * copies of the same sentence in one card is noise. */
.ocap-step-card.ocap-step-two .ocap-button-large,
.ocap-step-card.ocap-step-two .ocap-step-note,
.ocap-step-card.ocap-step-two .ocap-subnote {
  display: none;
}

.ocap-step-card.ocap-step-two .ocap-email-step {
  display: block;
  animation: ocapIn .18s ease-out;
}

.ocap-subnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--ocap-muted);
  font-size: .92rem;
  text-align: center;
}

@keyframes ocapIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ocapSheetIn {
  from {
    opacity: .92;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Standalone /freebie page. This is the minimal olhp subset needed on a route
   that deliberately does not load theme or mu-plugin CSS. */
body.ocap-freebie-page {
  --olhp-disp: var(--ocap-head);
  --olhp-body-font: var(--ocap-body);
  --olhp-grad: linear-gradient(100deg,#1e7af0,#19c2e6);
  --olhp-bg: #f7fafd;
  --olhp-bg2: #eef4fa;
  --olhp-ink: #0e1726;
  --olhp-text: #39455a;
  --olhp-muted: #5b687d;
  --olhp-glass: rgba(255,255,255,.78);
  --olhp-card: #fff;
  --olhp-line: rgba(14,23,38,.08);
  --olhp-line2: rgba(14,23,38,.14);
  --olhp-shadow: 0 24px 60px -26px rgba(20,48,90,.35);
  --olhp-pri: #0b5fc7;
  --olhp-pri-soft: rgba(30,122,240,.1);
  --olhp-glow1: rgba(30,122,240,.15);
  --olhp-glow2: rgba(25,194,230,.13);
  --ocap-surface: var(--olhp-card);
  --ocap-text: var(--olhp-ink);
  --ocap-muted: var(--olhp-muted);
  --ocap-strong-muted: var(--olhp-text);
  --ocap-border: var(--olhp-line2);
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--olhp-text);
  font-family: var(--olhp-body-font);
  line-height: 1.62;
  background: var(--olhp-bg);
}

:root[data-theme="dark"] body.ocap-freebie-page {
  --olhp-bg: #0b1220;
  --olhp-bg2: #0f1729;
  --olhp-ink: #eef3fb;
  --olhp-text: #cdd7e6;
  --olhp-muted: #9aa8bf;
  --olhp-glass: rgba(20,30,51,.66);
  --olhp-card: #141e33;
  --olhp-line: rgba(235,241,250,.07);
  --olhp-line2: rgba(235,241,250,.14);
  --olhp-shadow: 0 26px 64px -28px rgba(0,0,0,.75);
  --olhp-pri: #3f93ff;
  --olhp-pri-soft: rgba(63,147,255,.13);
  --olhp-glow1: rgba(63,147,255,.19);
  --olhp-glow2: rgba(43,210,242,.13);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body.ocap-freebie-page {
    --olhp-bg: #0b1220;
    --olhp-bg2: #0f1729;
    --olhp-ink: #eef3fb;
    --olhp-text: #cdd7e6;
    --olhp-muted: #9aa8bf;
    --olhp-glass: rgba(20,30,51,.66);
    --olhp-card: #141e33;
    --olhp-line: rgba(235,241,250,.07);
    --olhp-line2: rgba(235,241,250,.14);
    --olhp-shadow: 0 26px 64px -28px rgba(0,0,0,.75);
    --olhp-pri: #3f93ff;
    --olhp-pri-soft: rgba(63,147,255,.13);
    --olhp-glow1: rgba(63,147,255,.19);
    --olhp-glow2: rgba(43,210,242,.13);
  }
}

body.ocap-freebie-page .olhp-section {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--olhp-bg);
}

body.ocap-freebie-page .olhp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

body.ocap-freebie-page .olhp-gtext {
  color: transparent;
  background: var(--olhp-grad);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ocap-freebie-header {
  position: relative;
  z-index: 3;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 0;
}

.ocap-freebie-header .ocap-freebie-logo {
  color: var(--olhp-ink);
  font-family: var(--olhp-disp);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.022em;
  text-decoration: none;
}

.ocap-freebie-shell {
  min-height: calc(100vh - 52px);
}

body.ocap-freebie-page .ocap-freebie-card,
body.ocap-freebie-page .outliyr-capture-freebie-mount > .ocap-card {
  --ocap-surface: var(--olhp-card);
  --ocap-text: var(--olhp-ink);
  --ocap-muted: var(--olhp-muted);
  --ocap-strong-muted: var(--olhp-text);
  --ocap-border: var(--olhp-line2);
  max-width: none;
  margin: 0;
  color: var(--olhp-text);
  background: var(--olhp-bg) !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}

body.ocap-freebie-page .ocap-freebie-card::before {
  content: none;
}

body.ocap-freebie-page .olhp-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

body.ocap-freebie-page .olhp-aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}

body.ocap-freebie-page .olhp-aurora i:nth-child(1) {
  top: -170px;
  right: -130px;
  width: 640px;
  height: 430px;
  background: var(--olhp-glow1);
}

body.ocap-freebie-page .olhp-aurora i:nth-child(2) {
  bottom: -190px;
  left: -120px;
  width: 520px;
  height: 380px;
  background: var(--olhp-glow2);
}

body.ocap-freebie-page .olhp-hero-in {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 54px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px 78px;
}

body.ocap-freebie-page .olhp-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 7px 15px;
  color: var(--olhp-pri);
  font-family: var(--olhp-disp);
  font-size: 12.5px;
  font-weight: 700;
  background: var(--olhp-pri-soft);
  border: 1px solid var(--olhp-line2);
  border-radius: 8px;
}

body.ocap-freebie-page .ocap-title {
  margin: 0 0 18px;
  color: var(--olhp-ink);
  font-family: var(--olhp-disp);
  font-size: clamp(34px,4.8vw,56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.022em;
}

body.ocap-freebie-page .olhp-sub {
  max-width: 550px;
  margin: 0 0 26px;
  color: var(--olhp-text);
  font-size: 18.5px;
  line-height: 1.5;
}

body.ocap-freebie-page .olhp-trust {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  color: var(--olhp-muted);
  font-size: 14px;
  list-style: none;
}

body.ocap-freebie-page .olhp-trust .ocap-bullet {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding-left: 0;
  color: var(--olhp-text);
}

body.ocap-freebie-page .olhp-trust .ocap-bullet::before {
  content: none;
}

body.ocap-freebie-page .olhp-tick {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--olhp-pri);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  background: var(--olhp-pri-soft);
  border-radius: 50%;
}

.ocap-freebie-visual {
  width: 100%;
  max-width: 460px;
  justify-self: end;
}

body.ocap-freebie-page .olhp-glass {
  position: relative;
  padding: 28px;
  background: var(--olhp-glass);
  border: 1px solid var(--olhp-line2);
  border-radius: 22px;
  box-shadow: var(--olhp-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.ocap-freebie-page .ocap-cover {
  justify-content: center;
  margin-bottom: 22px;
}

body.ocap-freebie-page .ocap-cover img,
body.ocap-freebie-page .ocap-cover-large img {
  width: auto;
  max-width: min(220px,70%);
  max-height: 300px;
  margin: 0 auto;
  filter: drop-shadow(0 20px 28px rgba(16,24,40,.24));
}

body.ocap-freebie-page .ocap-cover-wide img,
body.ocap-freebie-page .ocap-cover-large.ocap-cover-wide img {
  width: 100%;
  max-width: 100%;
  max-height: none;
  border-radius: 14px;
}

body.ocap-freebie-page .ocap-freebie-form {
  margin: 0;
}

body.ocap-freebie-page .ocap-freebie-form .ocap-label {
  color: var(--olhp-muted);
}

body.ocap-freebie-page .ocap-freebie-form .ocap-form-row {
  grid-template-columns: 1fr;
  gap: 10px;
}

body.ocap-freebie-page .ocap-freebie-form .ocap-input {
  width: 100%;
  padding: 14px 16px;
  color: var(--olhp-ink) !important;
  font-family: var(--olhp-body-font);
  font-size: 16px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(125,125,160,.35) !important;
  border-radius: 12px;
}

body.ocap-freebie-page .ocap-freebie-form .ocap-input:focus {
  border-color: var(--olhp-pri) !important;
  outline: none;
  box-shadow: 0 0 0 4px var(--olhp-pri-soft);
}

body.ocap-freebie-page .olhp-btn,
body.ocap-freebie-page .ocap-freebie-form .ocap-button {
  display: inline-block;
  width: 100%;
  padding: 16px 30px;
  color: #fff;
  font-family: var(--olhp-disp);
  font-size: 17px;
  font-weight: 700;
  white-space: normal;
  background: var(--olhp-grad);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 40px -14px rgba(30,122,240,.55);
}

body.ocap-freebie-page .olhp-btn:hover,
body.ocap-freebie-page .ocap-freebie-form .ocap-button:hover {
  color: #fff;
  opacity: .92;
  transform: translateY(-1px);
}

body.ocap-freebie-page .ocap-proof {
  color: var(--olhp-muted);
}

body.ocap-freebie-page .ocap-proof strong,
body.ocap-freebie-page .ocap-message,
body.ocap-freebie-page .ocap-success-title {
  color: var(--olhp-ink);
}

.ocap-freebie-description {
  padding: 64px 0 72px;
  background: var(--olhp-bg2) !important;
  border-top: 1px solid var(--olhp-line);
}

body.ocap-freebie-page .olhp-skicker {
  margin: 0 0 12px;
  color: var(--olhp-pri);
  font-family: var(--olhp-disp);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

body.ocap-freebie-page .olhp-lede {
  max-width: 860px;
  margin: 0;
  color: var(--olhp-text);
  font-size: 17.5px;
  line-height: 1.65;
}

.ocap-freebie-embed .ocap-freebie-shell {
  min-height: 100vh;
}

.ocap-freebie-embed .olhp-aurora {
  display: none;
}

.ocap-freebie-embed .olhp-hero-in {
  padding-top: 28px;
  padding-bottom: 34px;
}

.ocap-freebie-embed .ocap-freebie-description {
  padding: 38px 0 44px;
}

/* Content-fit framing (?fit=content): every decorative layer is absolute and
   the autoheight script measures this content shell, never the iframe viewport. */
.ocap-freebie-fit,
.ocap-freebie-fit .ocap-freebie-shell {
  min-height: 0;
}

.ocap-freebie-fit {
  background: transparent;
}

@media (max-width: 600px) {
  /* Stack on phones: cover on top, copy below. A 2-column card is unreadable at ~400px. */
  .ocap-card-body,
  .ocap-end_of_article .ocap-card-body,
  .ocap-modal-card .ocap-card-body,
  .ocap-slide-wrap .ocap-card-body {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
    max-height: calc(100vh - var(--ocap-sticky-offset, 0px) - 12px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ocap-cover {
    justify-content: center;
  }

  .ocap-cover img,
  .ocap-cover-large img,
  .ocap-slide-wrap .ocap-cover img {
    max-width: 150px;
    max-height: 220px;
    margin: 0 auto;
  }

  .ocap-form-row {
    grid-template-columns: 1fr;
  }

  .ocap-button,
  .ocap-success-link,
  .ocap-referral-copy {
    width: 100%;
  }

  .ocap-name-row {
    grid-template-columns: 1fr;
  }

  .ocap-card.is-success .ocap-card-body {
    padding: 24px;
  }


  .ocap-referral-taps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ocap-slide-wrap {
    right: 0;
    bottom: var(--ocap-sticky-offset, 0px);
    width: 100%;
    padding: 0 0 env(safe-area-inset-bottom);
  }

  .ocap-slide-wrap .ocap-card {
    border-radius: 16px 16px 0 0;
    animation: ocapSheetIn .22s ease-out;
  }

  .ocap-overlay {
    padding: 14px;
    place-items: end center;
  }

  .ocap-modal-card {
    max-height: calc(100vh - 28px);
    overflow: auto;
  }

  .ocap-overlay.ocap-exit_intent {
    align-items: end;
    padding: 0;
    place-items: end center;
  }

  .ocap-overlay.ocap-exit_intent .ocap-modal-card {
    width: 100%;
    max-height: calc(100vh - env(safe-area-inset-top));
    border-radius: 16px 16px 0 0;
    animation: ocapSheetIn .22s ease-out;
  }

  .ocap-freebie-shell {
    align-items: start;
    min-height: 100vh;
    padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 520px) {
  .ocap-newsletter .ocap-form-row {
    grid-template-columns: 1fr;
  }

  .ocap-newsletter .ocap-button {
    width: 100%;
  }

  .ocap-in-article .ocap-form-row {
    grid-template-columns: 1fr;
  }

  .ocap-in-article .ocap-button {
    width: 100%;
  }

  .ocap-in-article .ocap-in-article-body {
    padding: 24px;
  }
}

@media (max-width: 390px) {
  .ocap-name-row {
    grid-template-columns: minmax(0,1fr) auto;
  }

  /* stays stacked (inherits the <=600px single-column + centered cover) */
  .ocap-cover img,
  .ocap-cover-large img,
  .ocap-slide-wrap .ocap-cover img {
    max-width: 132px;
    max-height: 190px;
  }
}

@media (max-width: 920px) {
  body.ocap-freebie-page .olhp-hero-in {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-top: 46px;
    padding-bottom: 58px;
  }

  .ocap-freebie-visual {
    max-width: 520px;
    margin: 0 auto;
    justify-self: center;
  }
}

@media (max-width: 600px) {
  body.ocap-freebie-page .ocap-freebie-shell {
    min-height: 0;
    padding: 0;
  }

  .ocap-freebie-header {
    padding: 18px 18px 0;
  }

  body.ocap-freebie-page .olhp-hero-in {
    gap: 32px;
    padding: 36px 18px 48px;
  }

  body.ocap-freebie-page .ocap-title {
    font-size: clamp(30px,8.6vw,38px);
  }

  body.ocap-freebie-page .olhp-sub {
    font-size: 16.5px;
  }

  body.ocap-freebie-page .olhp-glass {
    padding: 22px 18px;
  }

  body.ocap-freebie-page .ocap-cover img,
  body.ocap-freebie-page .ocap-cover-large img {
    max-width: min(180px,68%);
    max-height: 250px;
  }

  body.ocap-freebie-page .ocap-cover-wide img,
  body.ocap-freebie-page .ocap-cover-large.ocap-cover-wide img {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }

  .ocap-freebie-description {
    padding: 46px 0 52px;
  }

  body.ocap-freebie-page .olhp-wrap {
    padding: 0 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ocap-step-card.ocap-step-two .ocap-email-step,
  .ocap-slide-wrap .ocap-card,
  .ocap-overlay.ocap-exit_intent .ocap-modal-card {
    animation: none;
  }
}


/* The FOOTER newsletter placement sits on the dark band, where the generic
 * (dark) success ink vanished. The same .ocap-newsletter class is also on the
 * mid-page newsletter widget, which sits on a LIGHT card, so unscoped white ink
 * made that card's title invisible. Scope the light ink to the dark band. */
.outliyr-site-footer .ocap-newsletter .ocap-success-title {
  color: #fff !important;
}
.outliyr-site-footer .ocap-newsletter .ocap-message.ocap-success {
  color: rgba(255,255,255,.85);
}
.outliyr-site-footer .ocap-newsletter .ocap-name-prompt,
.outliyr-site-footer .ocap-newsletter .ocap-referral-ask {
  border-top-color: rgba(255,255,255,.16);
}

.outliyr-site-footer .ocap-newsletter .ocap-success-address,
.outliyr-site-footer .ocap-newsletter .ocap-name-label,
.outliyr-site-footer .ocap-newsletter .ocap-name-status,
.outliyr-site-footer .ocap-newsletter .ocap-referral-body,
.outliyr-site-footer .ocap-newsletter .ocap-referral-more {
  color: rgba(255,255,255,.85) !important;
}

.ocap-practical-light-matrix{max-width:1080px;margin:0 auto;padding:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;color:var(--ocap-text,#14213d)}.ocap-practical-light-matrix>.ocap-practical-light-title{grid-column:1/-1;margin:0 0 8px;font:700 clamp(28px,4vw,42px)/1.08 Lato,system-ui,sans-serif;letter-spacing:-.03em}.ocap-practical-light-card{padding:22px;border:1px solid var(--ocap-border,rgba(20,33,61,.14));border-radius:18px;background:var(--ocap-surface,#fff);box-shadow:0 10px 28px rgba(20,33,61,.08);scroll-margin-top:24px}.ocap-practical-light-card-title{margin:0 0 10px;font-size:20px;line-height:1.2;color:var(--ocap-text,#14213d)}.ocap-practical-light-action{margin:0 0 14px;line-height:1.55;color:var(--ocap-muted,#44546f)}.ocap-practical-light-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 16px;padding:0;list-style:none;color:var(--ocap-muted,#44546f);font-size:14px}.ocap-practical-light-checks li::before{content:"✓";margin-right:7px;color:var(--ocap-accent,#1686f8);font-weight:800}.ocap-practical-light-gate{width:18px;height:18px;margin:8px 8px 8px 0;accent-color:var(--ocap-accent,#1686f8);vertical-align:middle}.ocap-practical-light-gate-label{display:inline;line-height:1.45;color:var(--ocap-muted,#44546f);cursor:pointer}.ocap-practical-light-gate:focus-visible{outline:3px solid rgba(61,165,255,.35);outline-offset:3px}.ocap-practical-light-card .ocap-success-link{margin-top:14px}html[data-theme="dark"] .ocap-practical-light-card{background:var(--ocap-surface,#1a1e27);border-color:rgba(255,255,255,.14)}html[data-theme="dark"] .ocap-practical-light-card-title,html[data-theme="dark"] .ocap-practical-light-matrix>.ocap-practical-light-title{color:var(--ocap-text,#fff)}html[data-theme="dark"] .ocap-practical-light-action,html[data-theme="dark"] .ocap-practical-light-checks,html[data-theme="dark"] .ocap-practical-light-gate-label{color:var(--ocap-muted,#c3c9d4)}@media(max-width:600px){.ocap-practical-light-matrix{grid-template-columns:1fr;padding:22px 18px;gap:12px}.ocap-practical-light-card{padding:18px}.ocap-practical-light-checks{grid-template-columns:1fr}.ocap-practical-light-matrix>.ocap-practical-light-title{font-size:30px}}

/* Cloudflare Turnstile.

   Rendered with appearance:"interaction-only", so for the large majority of
   readers Cloudflare clears the check silently and this element stays empty and
   collapsed: `:empty` gives it zero height and zero margin so it cannot open a
   gap under the form when nothing is there. When a real interactive challenge
   IS shown it must be unmissable and comfortably spaced, so a non-empty host
   gets 16px of clearance from the row above and 16px from the message below,
   matching the 16px rhythm the rest of the card uses between control groups. */
.ocap-turnstile {
  margin: 16px 0 0;
}

.ocap-turnstile:empty {
  margin: 0;
  height: 0;
  overflow: hidden;
}

.ocap-turnstile iframe {
  max-width: 100%;
}

.ocap-turnstile:not(:empty) + .ocap-message {
  margin-top: 16px;
}

/* Double opt-in confirmation card. The homepage band styles these same class
   names in the theme; this is only the baseline so the card reads sanely on
   every other surface. Namespaced to the new classes, nothing else touched. */
.ocap-success-pending .ocap-pending-icon {
  display: block;
  margin-bottom: 12px;
  font-size: 30px;
  line-height: 1;
}
/* The measured margins below own the rhythm; the grid gap would add to every
   one of them. */
.ocap-success-pending {
  gap: 0;
}

.ocap-success-pending > .ocap-success-body {
  margin: 24px 0 0;
}

.ocap-success-pending .ocap-pending-address {
  display: block;
  margin: 20px 0 0;
  font-weight: 700;
  word-break: break-all;
}
.ocap-pending-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}
.ocap-pending-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--ocap-accent, #1686f8);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.ocap-pending-resend {
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--ocap-border, rgba(20, 33, 61, .22));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ocap-pending-resend[disabled] {
  opacity: .55;
  cursor: default;
}
.ocap-pending-status {
  flex: 1 0 100%;
  margin: 0;
  font-size: 14px;
}
.ocap-pending-status:empty {
  display: none;
}

/* One full-width action per line on a phone, same as every other button.
   This block sits AFTER the base .ocap-pending-actions rule on purpose: a
   media query adds no specificity, so an earlier copy of these declarations
   loses to the base rule further down the file. */
@media (max-width: 600px) {
  /* The success grid centers its children, so this box is content width until
     it is told otherwise; without that the buttons stretch to 150px, not to the
     card. Measured live at 390px before the fix. */
  .ocap-pending-actions {
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .ocap-pending-open,
  .ocap-pending-resend {
    width: 100%;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Provider sign-in row (Google / Apple).

   Rendered by capture-render.js only when the outliyr-auth modal is on the
   page, so these rules describe an alternative path, never the primary one.
   The email field stays the main action: this block sits under it, separated
   by a labelled divider, with 24px of clearance above the divider. The card's
   own bottom padding (24px, 32px on the larger placements) is what separates
   the buttons from the card edge below. Buttons sit side by side and wrap to
   full width on narrow screens instead of squeezing their labels.
   --------------------------------------------------------------------------- */
.ocap-sso {
  margin-top: 24px;
}

.ocap-sso-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--ocap-muted);
  font-size: .8rem;
  line-height: 1.2;
  text-transform: lowercase;
}

.ocap-sso-divider::before,
.ocap-sso-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--ocap-border);
}

/* THE ROW DECIDES ONE-UP OR TWO-UP FROM THE SPACE IT ACTUALLY HAS.
   ------------------------------------------------------------------------
   Measured on outliyr.com, not guessed: at the type scale below, "Continue
   with Google" needs 238.9px of button and "Continue with Apple" 225.7px,
   marks, gap and padding included. The homepage mini opt-in gives this row
   420px, so two of them cannot sit side by side there; the footer module
   gives it 520px, where they can. A flex row with a 200px basis split the
   difference and handed each button 204px, which is how BOTH labels ended up
   overflowing their own button by 24-32px.

   auto-fit with a 240px floor lets the row answer that question per surface:
   two columns when 496px is available, one full-width column when it is not.
   Either way the two buttons are the same width as each other, which is the
   whole point of the pair. Apple's wording may not be shortened to make a
   narrow row fit, so the row wraps instead. */
.ocap-sso-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* PROVIDER BUTTONS: ONE SPEC, BOTH PROVIDERS.
   ------------------------------------------------------------------------
   Google used to be Google Identity Services' own renderButton() dropped into
   a host box of ours. That could never match the button beside it: GIS owns
   its font, its 40px height and its shape, so equal height, width, font size,
   font weight and radius were impossible, and on the homepage card it showed
   as a bordered box inside our box with the word "Google" truncated. Both
   buttons are now .ocap-sso-button, drawn by the same factory in
   capture-render.js, so this ONE rule is the geometry of both.

   Measured, not eyeballed. Every number is shared by Google and Apple:

     button height        48px  (Apple floor 30pt; Google has no floor)
     button min width    200px  (Apple floor 140pt)
     button padding    12px 20px  (20px left edge clears Apple's ask of half
                                 the mark height, so 10px)
     border radius        12px  (the site button radius, homepage primary)
     font size          .95rem, weight 500, line-height 1.25, all inherited
                                 from the card's own body font
     mark to label gap    12px
     Apple mark         21px tall  (Apple asks ~43% of button height)
     Google mark        20px square (Google's G is drawn on a square grid)
     button to button     16px, from .ocap-sso-row
     divider to row       16px, from .ocap-sso-divider margin-bottom
     form to divider      24px, from .ocap-sso margin-top
     row to card edge     24px (32px on the larger placements), from the
                                 card's own bottom padding

   Wording is each provider's approved phrasing for a custom button:
   "Continue with Apple" and "Continue with Google", unparaphrased. */
.ocap-sso-button {
  min-width: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  cursor: pointer;
}

/* THE TYPE SCALE, RESTATED ONE CLASS HIGHER.
   ------------------------------------------------------------------------
   The site theme carries `button:not(.menu-toggle), ... { font-size: 18px }`,
   which out-specifies a single class, so `.ocap-sso-button` never actually
   got the .95rem it declares. Measured on the live homepage: both labels
   rendered at 18px and overflowed their button. The homepage stylesheet used
   to hide this with a 13.5px !important override that also drew the box HP-09
   was about, so removing that override exposed it. Restating the scale at two
   classes wins without !important. */
.ocap-sso-row .ocap-sso-button {
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.25;
}

.ocap-sso-button:disabled {
  cursor: default;
  opacity: .72;
}

/* The label never truncates: it stays on one line and the ROW wraps to
   one button per line first, which is why the buttons carry a flex-basis and
   never a fixed width. Checked at 390px, where both go full width. */
.ocap-sso-label {
  white-space: nowrap;
}

.ocap-sso-mark {
  flex: 0 0 auto;
  display: block;
}

/* Apple's mark is measured on HEIGHT, at roughly 43% of the button, and the
   glyph is optically top-light, so it is nudged up by a hair to sit on the
   text baseline block rather than below it. */
.ocap-sso-mark-apple {
  width: 17px;
  height: 21px;
  margin-top: -2px;
  fill: currentColor;
}

/* Google's G is square and optically centred already, so it needs no nudge.
   It carries its own four brand colours per path and must never be tinted,
   which is why no fill is declared here. */
.ocap-sso-mark-google {
  width: 20px;
  height: 20px;
}

/* --- Google: Google's approved LIGHT button. White surface, #1F1F1F ink and
   a #747775 1px border, which is the treatment Google publishes for a light
   button on a light background. Google does not permit recolouring the
   surface arbitrarily, so this stays white in every context below. */
.ocap-sso-button-google {
  background: #FFFFFF;
  border-color: #747775;
  color: #1F1F1F;
}

.ocap-sso-button-google:hover:not(:disabled) {
  background: #F7F8F8;
  border-color: #747775;
}

/* --- Apple: BLACK button on the light card. Black surface, white ink, white
   mark, which is Apple's primary variant. */
.ocap-sso-button-apple {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
}

.ocap-sso-button-apple:hover:not(:disabled) {
  background: #1A1A1A;
  border-color: #1A1A1A;
}

.ocap-sso-button:focus-visible {
  outline: 2px solid var(--ocap-accent, #3DA5FF);
  outline-offset: 2px;
}

/* No width media query. The row above is driven by the space it is given,
   not by the viewport, which is the only thing that works when the same
   widget renders into a 420px card and a 520px footer column at the same
   1440px viewport. A 390px phone falls out of the same rule as one column. */

/* ON A DARK GROUND, BOTH SURFACES ARE WHITE, DELIBERATELY.
   ------------------------------------------------------------------------
   Two grounds are dark: the site footer band (.outliyr-site-footer
   .ocap-newsletter, panel #0e1826) and the dark theme
   (html[data-theme="dark"], which is how the rest of this stylesheet does
   dark). The footer band already flipped Apple to white; the dark theme did
   not cover this row at all, which is the dark half of the defect Nick found
   on the homepage card: a white Google box beside a black Apple button.

   The dark-theme half is scoped to the THEME and not to .ocap-card, because
   the surface the defect was reported on is not a card. The homepage mini
   opt-in is .olhp-herocap .ocap-newsletter, the footer module is
   .outliyr-site-footer .ocap-newsletter, and only the modal placements carry
   .ocap-card. A .ocap-card-scoped rule would have left the two reported
   surfaces exactly as broken as they were, so every provider row inside a
   dark theme gets this treatment.

   Google's surface may not be recoloured, and white on #0e1826 measures
   17.84:1, so Google stays white. Apple therefore flips to its WHITE variant
   (white surface, black ink, black mark), which is Apple's own second
   approved treatment, and the pair reads as one row instead of two accidents.
   Google's #747775 border is kept: it is what separates a white button from a
   white button. */
.outliyr-site-footer .ocap-newsletter .ocap-sso-divider,
html[data-theme="dark"] .ocap-sso-divider {
  color: rgba(255,255,255,.85);
}

.outliyr-site-footer .ocap-newsletter .ocap-sso-divider::before,
.outliyr-site-footer .ocap-newsletter .ocap-sso-divider::after,
html[data-theme="dark"] .ocap-sso-divider::before,
html[data-theme="dark"] .ocap-sso-divider::after {
  background: rgba(255,255,255,.24);
}

.outliyr-site-footer .ocap-newsletter .ocap-sso-button-apple,
html[data-theme="dark"] .ocap-sso-button-apple {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
}

.outliyr-site-footer .ocap-newsletter .ocap-sso-button-apple:hover:not(:disabled),
html[data-theme="dark"] .ocap-sso-button-apple:hover:not(:disabled) {
  background: #F1F1F1;
  border-color: #F1F1F1;
}

/* ---------------------------------------------------------------------------
   POST-SUBMIT STATE HOOK CONTRACT (for the homepage redesign lane).

   capture-render.js stamps the post-submit status element with stable hooks in
   success():

     .ocap-state                    every post-submit state
     .ocap-state--pending-confirm   confirm-first signup: the reader has been
                                    asked to open one email and tap the button
                                    in it. Nothing subscriber-shaped exists yet
                                    and no resource link is rendered.
     .ocap-state--subscribed        the signup completed: resource link, name
                                    prompt, welcome gift and referral ask can
                                    all appear inside this container.

     [data-ocap-state="pending_confirm"] / [data-ocap-state="subscribed"]
                                    the same two states as an attribute, for
                                    selectors that should not depend on class
                                    order.

   The pre-existing .ocap-message and .ocap-success classes are still applied
   alongside these, unchanged.

   THIS FILE SHIPS NO STYLING FOR THESE HOOKS. The confirmation card above is
   styled against its OWN classes (.ocap-success-pending, .ocap-pending-*),
   which the homepage band also targets; .ocap-state* is deliberately left
   unstyled so a third surface can target the state without inheriting the
   card. Add declarations for it where that surface lives, not here.
   --------------------------------------------------------------------------- */