@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: 18px;
  align-items: center;
  padding: 22px;
}

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

.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));
}

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

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

.ocap-title {
  margin: 0 0 8px;
  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 16px;
  color: var(--ocap-muted);
  font-size: 1rem;
  line-height: 1.45;
}

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

.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: 2px;
}

.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;
  color: var(--ocap-strong-muted);
  font-size: .93rem;
  line-height: 1.2;
}

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

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

.ocap-email-value {
  margin: 0 0 10px;
  color: var(--ocap-text);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.5;
}

.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-label,
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-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 {
  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-referral-ask {
  background: transparent !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-theme="dark"] .ocap-card .ocap-referral-copy,
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-copy:hover,
html[data-theme="dark"] .ocap-card .ocap-referral-copy:focus-visible,
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).
 *
 * One job per view: the confirmation first, then one quiet name line, then one
 * quiet referral line. The pending/confirmation card keeps its own 9px grid
 * gap and its own margins, so every rule here excludes it by selector.
 *
 *   heading -> body                 12
 *   body -> address                 16
 *   address -> primary action       20
 *   primary action -> name line     28 above a 1px hairline, 28 below it
 *   name line -> referral line      28 above a 1px hairline, 28 below it
 *   referral line -> "More ways"    14
 *   "More ways" -> share tiles      16
 *   share tile grid gutter          10
 */
.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: 12px 0 0;
}

/* Echoed straight off the form, so it reads as data, never as a heading. */
.ocap-success-address {
  display: block;
  width: 100%;
  margin: 16px 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: 20px;
}

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

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

.ocap-name-label {
  color: #4a5568 !important;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.3;
}

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

.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: 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%;
  margin-top: 5px;
  color: #207a4b !important;
  font-weight: 700;
  text-align: center;
}

.ocap-welcome-gift {
  display: grid;
  gap: 8px;
  margin-top: 24px;
  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: 14px;
  margin-top: 28px;
  padding: 28px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(16,24,40,.12);
  border-radius: 0;
  text-align: center;
}

/* The ask is ONE line by default: the sentence and its Copy button. */
.ocap-referral-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  width: 100%;
  gap: 12px;
  align-items: center;
}

.ocap-referral-body {
  margin: 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 {
  min-height: 44px;
  padding: 11px 16px;
  color: var(--ocap-text, #16233b) !important;
  font-family: var(--ocap-head);
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.1;
  background: #fff;
  border: 1px solid rgba(61,165,255,.24);
  border-radius: 8px;
  cursor: pointer;
}

/* A text link, not a second button: the tiles are an afterthought, never the
 * first thing offered. 14px above it, 16px below it before the grid opens. */
.ocap-referral-more {
  justify-self: center;
  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: 10px;
  margin-top: 2px;
}

/* 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;
}

.ocap-slide-wrap .ocap-card-body {
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 24px 22px 22px;
}

.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;
}

.ocap-step-card.ocap-step-two .ocap-button-large,
.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 {
  margin: 10px 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: 14px;
    padding: 22px 18px 18px;
  }

  .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-referral-row {
    grid-template-columns: 1fr;
  }

  .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;
}
.ocap-success-pending .ocap-pending-address {
  display: block;
  margin: 12px 0 0;
  font-weight: 700;
  word-break: break-all;
}
.ocap-pending-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
.ocap-pending-open {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ocap-accent, #1686f8);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.ocap-pending-resend {
  padding: 10px 18px;
  border: 1px solid var(--ocap-border, rgba(20, 33, 61, .22));
  border-radius: 999px;
  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: 4px 0 0;
  font-size: 14px;
}
.ocap-pending-status:empty {
  display: none;
}

/* ---------------------------------------------------------------------------
   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 and 24px
   below the buttons so the row reads as its own decision rather than a second
   half of the form. 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);
}

.ocap-sso-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ocap-sso-button {
  flex: 1 1 200px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--ocap-border);
  border-radius: 12px;
  background: var(--ocap-surface);
  color: var(--ocap-text);
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
}

.ocap-sso-button:hover {
  border-color: var(--ocap-strong-muted);
}

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

.ocap-sso-note {
  margin: 16px 0 0;
  color: var(--ocap-muted);
  font-size: .78rem;
  line-height: 1.5;
}

@media (max-width: 480px) {
  .ocap-sso-row {
    gap: 12px;
  }

  .ocap-sso-button {
    flex: 1 1 100%;
  }
}

/* The FOOTER newsletter placement sits on the dark band, which does not
   override the light tokens (only the success ink is patched, further down).
   Same treatment for this row's ink so the divider and the note stay legible
   there, scoped to the dark band because the same class is also on the light
   mid-page widget. */
.outliyr-site-footer .ocap-newsletter .ocap-sso-divider,
.outliyr-site-footer .ocap-newsletter .ocap-sso-note {
  color: rgba(255,255,255,.85);
}

.outliyr-site-footer .ocap-newsletter .ocap-sso-divider::before,
.outliyr-site-footer .ocap-newsletter .ocap-sso-divider::after {
  background: rgba(255,255,255,.24);
}

/* ---------------------------------------------------------------------------
   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.
   --------------------------------------------------------------------------- */