@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: 16px;
}

/* PROVIDER BUTTONS.
   ------------------------------------------------------------------------
   Apple's mark is its own artwork and this button sits inside the sizing Apple
   publishes. Google's button is drawn by GIS into .ocap-sso-button-host below,
   so what is measured here is Apple's button and the box GIS is given.
   Measured, not eyeballed:

     button height        48px  (Apple floor 30pt)
     button min width    200px  (Apple floor 140pt)
     Apple mark         20.6px tall      (Apple asks ~43% of button height)
     mark to label gap    12px
     mark to left edge    20px  (Apple asks for at least half the mark
                                 height, so 10px)
     control to control   16px
     row above (divider)  24px, and the divider sits 24px under the form
     row below (note)     16px to the note, 0 to the card edge

   Wording is from Apple's approved list: "Continue with Apple", unparaphrased.
   Google's wording ships with Google's own button. */
.ocap-sso-button {
  flex: 1 1 200px;
  min-width: 200px;
  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;
}

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

/* GOOGLE'S OWN BUTTON, in a box we own.
   ------------------------------------------------------------------------
   Google Identity Services renders its official button into this host, so
   nothing here styles the button itself: GIS owns its surface, its mark and
   its wording, and it will not honour our declarations anyway. What we own is
   the BOX, and the box keeps the row's rhythm:

     host height         48px  (same as the Apple button beside it)
     GIS button height   40px  (Google's 'large' size), centred, so 4px of
                               clearance sits above and below it
     host width          fills the row column. GIS will not draw a button
                               wider than 400px, so past that the button
                               centres in the host instead of stretching
     host to host        16px, from .ocap-sso-row

   The rendered button is measured on mount, so a full-width row on mobile
   gets a full-width Google button rather than a fixed one. */
.ocap-sso-button-host {
  flex: 1 1 200px;
  min-width: 200px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ocap-sso-button-host.is-busy {
  opacity: .72;
  pointer-events: none;
}

.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 has no rules here at all. Google Identity Services renders its
   own button inside .ocap-sso-button-host and would not honour ours anyway.
   The colourway is asked for in JS by name: theme 'outline', the white
   button, on BOTH grounds. Measured: white on the footer panel #0e1826 is
   17.84:1, while GIS's 'filled_black' (#131314) on that same panel is 1.04:1
   and would vanish into it. On the light card the white button also keeps the
   white-Google / black-Apple pairing the row was designed around. */

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

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

@media (max-width: 480px) {
  /* Full width, stacked, still 16px apart so the two are never mistaken for
     one control. min-width drops so a 320px screen cannot overflow. */
  .ocap-sso-row {
    gap: 16px;
  }

  .ocap-sso-button,
  .ocap-sso-button-host {
    flex: 1 1 100%;
    min-width: 0;
  }
}

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

/* On the dark band Apple flips to its WHITE variant: white surface, black ink,
   black mark. That is Apple's own second approved treatment, and it puts both
   buttons on white down there, so the row reads as one pair. Google needs no
   override, because its light button is already white. */
.outliyr-site-footer .ocap-newsletter .ocap-sso-button-apple {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #000000;
}

.outliyr-site-footer .ocap-newsletter .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.
   --------------------------------------------------------------------------- */