/* =====================================================================
   Ad creative pages (static ad + carousel) · stage + creatives
   Stage matches the pitch site (dark teal, Geist). The creatives inside
   the phone are bright and readable, in Dr. Whitfield's own brand:
   warm paper, navy ink, Newsreader headlines, a gold highlighter.
   Creatives use container units (cqw) so they scale with the phone.
   ===================================================================== */
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------- stage ---------- */
html:has(> body.sa-body), body.sa-body { height: auto; min-height: 100%; }
body.sa-body {
  background: #081216;
  background-image:
    radial-gradient(70% 45% at 50% 0%, rgba(52, 118, 140, .34), transparent 70%),
    radial-gradient(50% 40% at 50% 70%, rgba(134, 212, 203, .07), transparent 70%);
  color: #eaf2f3;
}
.sa { justify-content: flex-start; min-height: 100vh; padding: clamp(36px, 6vh, 64px) 16px clamp(40px, 7vh, 72px); overflow: visible; }
.sa__intro { margin: 0 0 clamp(28px, 4vh, 40px); max-width: 620px; }
.sa__eyebrow { font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: .2em; color: #86d4cb; }
.sa__eyebrow::after { display: none; }
.sa__eyebrow::before { width: 22px; opacity: .8; }
.sa__title { margin: 12px 0 0; font-family: "Geist", system-ui, sans-serif; font-weight: 700; font-size: clamp(32px, 4vw, 44px); line-height: 1.08; letter-spacing: -.025em; color: #fff; }
.sa__sub { margin: 14px auto 0; max-width: 54ch; font-family: "Inter", system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: #a3b8bd; }
.sa__hint { margin-top: 22px; font-family: "Inter", system-ui, sans-serif; font-size: 14px; color: #7c9399; }
.callout .ln, .callout .ar { stroke: #86d4cb; }
.callout .bubble { background: #86d4cb; color: #06201d; font-family: "Geist", system-ui, sans-serif; font-style: normal; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }

/* =====================================================================
   STATIC AD CREATIVE (.ad1) · 4:5
   ===================================================================== */
.ad1 { container-type: inline-size; position: absolute; inset: 0; overflow: hidden; background: #f5f3ee; color: #0f1b2a; font-family: "Inter", system-ui, sans-serif; }
.ad1__photo { position: absolute; left: 0; right: 0; top: 0; height: 42%; background: #0e1a2e; }
.ad1__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 20%; display: block; }
.ad1__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(245,243,238,0) 70%, #f5f3ee 100%); }
.ad1__pill { position: absolute; left: 6cqw; top: 6cqw; display: inline-flex; align-items: center; gap: 1.8cqw; white-space: nowrap;
  padding: 1.9cqw 3.4cqw; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 600; font-size: 2.85cqw; letter-spacing: .06em; text-transform: uppercase; }
.ad1__pill i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #e9b949; box-shadow: 0 0 0 .8cqw rgba(233,185,73,.25); }
.ad1__body { position: absolute; left: 6cqw; right: 6cqw; top: 38%; bottom: 4.4cqw; display: flex; flex-direction: column; }
.ad1__kick { position: absolute; left: 6cqw; top: 18.5cqw; width: 40cqw; margin: 0; font-size: 3.1cqw; line-height: 1.4; color: rgba(255,255,255,.78); }
.ad1__kick b { display: block; margin-bottom: 1.2cqw; font-family: "Geist", system-ui, sans-serif; font-size: 9cqw; line-height: 1; letter-spacing: -.03em; color: #fff; }
.ad1__head { margin: 0; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 6.9cqw; line-height: 1.05; letter-spacing: -.015em; color: #0f1b2a; }
.hl { padding: 0 1cqw; border-radius: 1.2cqw; background: #f3d27e; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ad1__lead { margin: 1.8cqw 0 2.4cqw; font-size: 3.15cqw; line-height: 1.4; color: #3f4b58; }
.ad1__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5cqw; }
.ad1__rows li { display: flex; align-items: center; gap: 2.6cqw; padding: 1.7cqw 2.6cqw; border-radius: 2.2cqw; background: #fff;
  box-shadow: 0 .4cqw 1.6cqw rgba(15,27,42,.07); font-size: 3.15cqw; font-weight: 600; line-height: 1.25; color: #0f1b2a; }
.ad1__rows b { flex: none; display: grid; place-items: center; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #17384d; color: #fff; font-size: 2.9cqw; font-weight: 600; }
.ad1__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.ad1__who { display: flex; align-items: center; gap: 2cqw; font-size: 2.85cqw; color: #3f4b58; line-height: 1.25; }
.ad1__who b { color: #0f1b2a; font-weight: 600; }
.ad1__w { flex: none; display: grid; place-items: center; width: 6cqw; height: 6cqw; border-radius: 1.2cqw; background: #0f1b2a; color: #f5f3ee; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 4cqw; }
.ad1__btn { flex: none; padding: 2.6cqw 4.6cqw; border-radius: 99px; background: #17384d; color: #fff; font-size: 3.2cqw; font-weight: 600; white-space: nowrap; box-shadow: 0 1.2cqw 3cqw -1cqw rgba(23,56,77,.6); }

/* =====================================================================
   CAROUSEL SLIDES (.cs3) · 4:5, inside .cstage/.ctrack
   ===================================================================== */
.ctrack { display: flex; height: 100%; transition: transform .45s cubic-bezier(.16,1,.3,1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cstage { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }
.cs3 { container-type: inline-size; position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; background: #0f1b2a; color: #fff; font-family: "Inter", system-ui, sans-serif; }
.cs3 > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.cs3::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,27,42,0) 38%, rgba(15,27,42,.62) 62%, rgba(15,27,42,.94) 100%); }
.cs3__text { position: absolute; z-index: 2; left: 6.5cqw; right: 6.5cqw; bottom: 9cqw; margin: 0;
  font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 7cqw; line-height: 1.1; letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.cs3__text .hl { color: #0f1b2a; }
.cs3__mark { position: absolute; z-index: 2; left: 6.5cqw; bottom: 3.6cqw; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 1cqw; background: #f5f3ee; color: #0f1b2a; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 3.4cqw; }
.cs3__n { position: absolute; z-index: 2; right: 6.5cqw; bottom: 4.2cqw; font-size: 2.8cqw; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.7); }

/* floating proof cards */
.card3 { position: absolute; z-index: 2; right: 5cqw; top: 13cqw; width: 52cqw; padding: 3.2cqw 3.4cqw; border-radius: 3cqw; background: #fff; color: #0f1b2a;
  box-shadow: 0 2cqw 6cqw -2cqw rgba(0,0,0,.45); transform: rotate(2deg); font-size: 3cqw; line-height: 1.3; }
.card3--left { right: auto; left: 5cqw; transform: rotate(-2deg); }
.card3__k { display: block; margin-bottom: 1.8cqw; font-size: 2.3cqw; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8a5c2e; }
.card3 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4cqw; }
.card3 li { padding: 1.6cqw 2cqw; border-radius: 1.6cqw; background: #f5f3ee; font-weight: 500; }
.card3 li.hl2 { background: #f3d27e; }
.card3__big { display: block; font-family: "Geist", system-ui, sans-serif; font-weight: 700; font-size: 8cqw; line-height: 1; letter-spacing: -.03em; }
.card3__row { display: flex; align-items: center; gap: 2cqw; }
.card3__yt { flex: none; width: 7cqw; height: 5cqw; border-radius: 1.4cqw; background: #ff0000; position: relative; }
.card3__yt::after { content: ""; position: absolute; left: 2.8cqw; top: 1.4cqw; border-left: 1.9cqw solid #fff; border-top: 1.1cqw solid transparent; border-bottom: 1.1cqw solid transparent; }
.card3__bar { display: block; height: 1.3cqw; margin-top: 2cqw; border-radius: 99px; background: #e6e1d6; overflow: hidden; }
.card3__bar i { display: block; height: 100%; width: 72%; background: #ff0000; }
.card3__meta { display: flex; justify-content: space-between; margin-top: 1.4cqw; font-size: 2.5cqw; color: #626d78; }
.card3__face { flex: none; width: 9cqw; height: 9cqw; border-radius: 50%; object-fit: cover; object-position: 50% 14%; }
.card3__stars { color: #e9a400; letter-spacing: .1em; font-size: 3cqw; }

/* thumbnail wall slide */
.cs3__wall { position: absolute; inset: -6cqw; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; transform: rotate(-6deg) scale(1.12); }
.cs3__wall img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1.6cqw; display: block; }

/* light text slides (reframe + CTA) */
.cs3--paper { background: #f5f3ee; color: #0f1b2a; }
.cs3--paper::after { display: none; }
.cs3--paper .cs3__mark { background: #0f1b2a; color: #f5f3ee; }
.cs3--paper .cs3__n { color: #626d78; }
.cs3__center { position: absolute; z-index: 2; left: 8cqw; right: 8cqw; top: 50%; transform: translateY(-54%); }
.cs3__avatar { display: block; width: 16cqw; height: 16cqw; border-radius: 50%; object-fit: cover; object-position: 50% 14%; margin-bottom: 5cqw; border: 1cqw solid #fff; box-shadow: 0 1cqw 4cqw rgba(15,27,42,.18); }
.cs3__quote { margin: 0; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 7.4cqw; line-height: 1.12; letter-spacing: -.015em; color: #0f1b2a; }
.cs3__sign { margin: 4cqw 0 0; font-size: 3.2cqw; color: #3f4b58; }
.cs3__sign b { color: #0f1b2a; }
.cs3__cta { position: absolute; z-index: 2; left: 6.5cqw; right: 6.5cqw; top: 50%; transform: translateY(-54%); }
.cs3__pill { display: inline-flex; align-items: center; gap: 1.8cqw; padding: 1.8cqw 3.2cqw; border-radius: 99px; background: #0f1b2a; color: #fff; font-size: 2.7cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cs3__pill i { width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #e9b949; }
.cs3__ctahead { margin: 4.4cqw 0 2.6cqw; font-family: "Newsreader", Georgia, serif; font-weight: 600; font-size: 6.8cqw; line-height: 1.08; letter-spacing: -.015em; color: #0f1b2a; }
.cs3--paper .ad1__rows { margin-top: 1cqw; }
.cs3__tap { display: inline-block; margin-top: 4.6cqw; padding: 2.8cqw 5cqw; border-radius: 99px; background: #17384d; color: #fff; font-size: 3.3cqw; font-weight: 600; }

/* carousel controls (Instagram-true) */
.post-media .cnav { z-index: 6; }

/* ---------- Ads Manager copy (static ad page) ---------- */
.adcopy { width: 100%; max-width: 980px; margin: clamp(56px, 8vh, 88px) auto 0; font-family: "Inter", system-ui, sans-serif; text-align: left; }
.adcopy__k { margin: 0 0 18px; font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #86d4cb; }
.adcopy__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; }
.adcopy__side { display: grid; gap: 16px; align-content: start; }
.adcopy__card { padding: 22px 24px; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid rgba(134,212,203,.16); }
.adcopy__label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #7c9399; }
.adcopy__card p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: #dfe9eb; }
.adcopy__card p:last-child { margin-bottom: 0; }
.adcopy__card ol { margin: 0 0 12px; padding-left: 22px; font-size: 17px; line-height: 1.6; color: #fff; }
.adcopy__card ol li { margin-bottom: 4px; }
.adcopy__btn { display: inline-block; padding: 8px 16px; border-radius: 10px; background: #86d4cb; color: #06201d; font-family: "Geist", system-ui, sans-serif; font-weight: 700; font-size: 16px; }
@media (max-width: 760px) { .adcopy__grid { grid-template-columns: 1fr; } .adcopy__card { padding: 20px; } }

.card3__sub { display: block; margin-top: 1cqw; font-size: 2.9cqw; color: #3f4b58; }
.card3__line { display: block; margin-top: 1.6cqw; padding-top: 1.6cqw; border-top: 1px solid #ece7dc; font-size: 2.8cqw; color: #3f4b58; }
.card3__line b { color: #0f1b2a; }
.cs3--wall::after { background: linear-gradient(180deg, rgba(15,27,42,.15) 0%, rgba(15,27,42,.35) 40%, rgba(15,27,42,.88) 66%, rgba(15,27,42,.97) 100%); }