/* =========================================================================
   In-feed phone mock (shared shell). Static ad (Variant A) and carousel
   (Variant B) both link this file so the two phones can't drift.
   Spec: references/in-feed-phone-mock.md
   ========================================================================= */

/* ---- mobile hardening (references/mobile.md) ---- */
*, *::before, *::after { box-sizing: border-box; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
p, li, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; }
table, pre { display: block; max-width: 100%; overflow-x: auto; }
@media (max-width: 700px) {
  .tag, [class*="badge"], [class*="pill"] { margin-left: 0; }
}
@media (max-width: 420px) {
  .tok-merge, .tok-link, code { white-space: normal; }
}

html, body { overflow-x: hidden; }
body { background: #111a2b; color: #fff; min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ------------------------------ Stage ------------------------------------ */
.sa { position: relative; overflow: hidden; padding: clamp(40px, 6vh, 76px) 16px clamp(48px, 7vh, 88px);
  background: radial-gradient(90% 70% at 50% 0%, #22344f 0%, #16223a 55%, #111a2b 100%); }
.sa__glow { position: absolute; left: 50%; top: 34%; width: min(760px, 120vw); height: 620px; transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(208, 89, 79, 0.22), rgba(208, 89, 79, 0) 70%); pointer-events: none; }
.sa__intro { position: relative; text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vh, 44px); }
.sa__intro .eyebrow { color: #f2a39c; }
.sa__title { margin: 0; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.2vw + 16px, 42px);
  line-height: 1.12; letter-spacing: -0.02em; color: #ffffff; }
.sa__sub { margin: 14px auto 0; max-width: 46ch; font-size: 18px; line-height: 1.55; color: #c3cee0; }

.stage { position: relative; display: grid; place-items: center; }
.stage::after { content: ""; position: absolute; left: 50%; bottom: -14px; width: 420px; max-width: 90%; height: 60px;
  transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); filter: blur(28px); border-radius: 50%; z-index: 0; }

/* phone-wrap is the positioning context for the callout; phone-fit carries the scaled height */
.phone-wrap { position: relative; z-index: 1; }
.phone-fit { --s: 1; width: calc(var(--w, 392px) * var(--s)); height: calc(var(--w, 392px) * 846 / 392 * var(--s)); }

/* ---------------------------- iPhone 17 shell ---------------------------- */
.iphone {
  --w: 392px; --r: 62px;
  position: relative; width: var(--w); aspect-ratio: 392 / 846; border-radius: var(--r); padding: 11px;
  transform: scale(var(--s, 1)); transform-origin: top left;
  background: linear-gradient(148deg, #6f6a63 0%, #100e0c 22%, #7b756c 46%, #100e0c 70%, #6f6a63 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 0 0 2px rgba(0, 0, 0, 0.55),
    0 60px 120px -30px rgba(0, 0, 0, 0.95), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.iphone::before { content: ""; position: absolute; inset: 8px; border-radius: calc(var(--r) - 8px); background: #000; }
.iphone::after { content: ""; position: absolute; inset: 11px; border-radius: calc(var(--r) - 11px); z-index: 6; pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 30%, rgba(255, 255, 255, 0) 46%); }
.btn-side { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #4c4842, #8a847a); }
.btn-side--mute { left: -3px; top: 132px; height: 30px; }
.btn-side--up   { left: -3px; top: 186px; height: 58px; }
.btn-side--down { left: -3px; top: 258px; height: 58px; }
.btn-side--power { right: -3px; top: 208px; height: 92px; }

.screen {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border-radius: calc(var(--r) - 11px); background: #ffffff; color: #000000;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px; line-height: 1.35; -webkit-font-smoothing: antialiased;
}
.screen a { color: inherit; text-decoration: none; }

/* ------------------------------ iOS chrome ------------------------------- */
.status { position: relative; flex: none; height: 54px; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 30px 0 34px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.island { position: absolute; left: 50%; top: 11px; width: 116px; height: 33px; transform: translateX(-50%); background: #000; border-radius: 20px; }
.island::after { content: ""; position: absolute; right: 22px; top: 11px; width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #2b3a55 0%, #0b0f18 60%); }
.status__icons { display: flex; align-items: center; gap: 6px; }
.status__icons svg { display: block; height: 12px; width: auto; }
.homebar { position: absolute; left: 50%; bottom: 8px; width: 138px; height: 5px; transform: translateX(-50%); background: #000; border-radius: 3px; z-index: 5; }

/* --------------------------- Instagram chrome ---------------------------- */
.ig-top { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px 0 14px; }
.ig-logo { font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -0.01em; }
.ig-top__icons { display: flex; align-items: center; gap: 22px; }
.ig-top__icons svg, .actions svg, .tabbar svg { width: 25px; height: 25px; fill: none; stroke: #000; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; display: block; }
.ig-dm { position: relative; }
.ig-badge { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3040;
  color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }

.feed { flex: 1; min-height: 0; overflow: hidden; }
.post-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 12px; }
.avatar-ring { flex: none; width: 36px; height: 36px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.avatar-ring img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; object-fit: cover; display: block; }
.post-head__who { flex: 1; min-width: 0; line-height: 1.2; }
.handle { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; }
.handle svg { width: 13px; height: 13px; }
.sponsored { display: block; font-size: 12px; color: #737373; }
.dots3 { width: 22px; height: 22px; }

.post-media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #1b2940; }
.post-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cta-strip { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px;
  background: #fafafa; border-bottom: 0.5px solid #dbdbdb; font-weight: 600; font-size: 14px; color: #000; }
.cta-strip svg { width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cta-strip:hover { background: #f2f2f2; }

.actions { position: relative; display: flex; align-items: center; gap: 16px; padding: 10px 14px 6px; }
.actions .spacer { flex: 1; }
.likes { padding: 0 14px; font-weight: 600; font-size: 14px; }
.caption { margin: 3px 0 0; padding: 0 14px; font-size: 14px; line-height: 1.35; }
.caption b { font-weight: 600; }
.caption .more { color: #737373; }
.comments { margin: 4px 0 0; padding: 0 14px; color: #737373; font-size: 14px; }
.stamp { margin: 3px 0 0; padding: 0 14px; color: #737373; font-size: 11px; letter-spacing: 0.01em; }

.tabbar { flex: none; height: 74px; padding: 10px 26px 0; display: flex; justify-content: space-between; align-items: flex-start;
  background: #fff; border-top: 0.5px solid #dbdbdb; }
.tabbar .me { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; border: 1px solid #dbdbdb; }
.tabbar .me img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------- Callout --------------------------------- */
.callout { position: absolute; left: 100%; width: 230px; pointer-events: none; transition: opacity 0.35s ease; }
.callout svg { display: block; width: 130px; height: 90px; overflow: visible; }
.callout .ln, .callout .ar { fill: none; stroke: #f2a39c; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bubble { display: inline-block; margin: 2px 0 0 54px; padding: 12px 18px; border-radius: 14px; transform: rotate(-3deg);
  background: linear-gradient(135deg, #d0594f, #b9423c); color: #fff; font-family: var(--display); font-weight: 600; font-size: 19px;
  line-height: 1.2; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.6); position: relative; }

.js .callout .ln { stroke-dasharray: 220; stroke-dashoffset: 220; }
.js .callout .ar { opacity: 0; }
.js .callout .bubble { opacity: 0; transform: rotate(-3deg) translateY(8px); transition: opacity 0.5s ease 1.2s, transform 0.5s ease 1.2s; }
.js .rv.in .callout .ln { animation: drawln 0.9s ease 0.35s forwards; }
.js .rv.in .callout .ar { animation: fadein 0.3s ease 1.15s forwards; }
.js .rv.in .callout .bubble { opacity: 1; transform: rotate(-3deg); }
@keyframes drawln { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

.hint { position: relative; z-index: 1; margin: 30px 0 0; text-align: center; font-size: 15px; color: #a9b6cb; }

@media (max-width: 980px) {
  .callout { position: static; width: auto; margin: 26px auto 0; text-align: center; }
  .callout svg { display: none; }
  .bubble { margin: 0; }
  .bubble::before { content: ""; position: absolute; left: 50%; top: -9px; transform: translateX(-50%);
    border: 9px solid transparent; border-top: 0; border-bottom-color: #c84d45; }
}
@media (max-width: 460px) {
  .iphone { --w: 320px; --r: 50px; }
  .phone-fit { --w: 320px; }
  .status { padding: 6px 22px 0 26px; }
  .tabbar { padding: 10px 18px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .callout .ln { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .js .callout .ar, .js .callout .bubble { opacity: 1; animation: none; transition: none; }
}

/* callout anchors: static points at the CTA strip, carousel at the next arrow */
.callout--static { top: 63%; }
.callout--car { top: 41%; }

/* ---------------------- Variant B: carousel in the media slot ---------------------- */
.post-media--car { aspect-ratio: 1080 / 1350; }
.cstage { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.cstage:active { cursor: grabbing; }
.ctrack { display: flex; height: 100%; transition: transform 0.42s cubic-bezier(0.22, 0.8, 0.24, 1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cslide { flex: 0 0 100%; height: 100%; }
.cslide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; }
.cnav { position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border: 0; padding: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.82); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: pointer; display: grid; place-items: center;
  transition: opacity 0.2s ease; z-index: 2; }
.cnav::before { content: ""; position: absolute; inset: -9px; }
.cnav svg { width: 12px; height: 12px; fill: none; stroke: #262626; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cnav--prev { left: 8px; }
.cnav--next { right: 8px; }
.cnav[disabled] { opacity: 0; pointer-events: none; }
.ig-count { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 9px; border-radius: 12px; background: rgba(0, 0, 0, 0.6);
  color: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.cdots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: 4px; }
.cdots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #c7c7c7; cursor: pointer; position: relative; }
.cdots button::before { content: ""; position: absolute; inset: -6px -2px; }
.cdots button.is-on { background: #0095F6; }
.phone-wrap:has(#cprev:not([disabled])) .callout { opacity: 0; }