/* =========================================================================
   In-feed phone mock · shared shell for the static ad AND the carousel.
   (carousel/phone/ links this file, never a fork.) iPhone 17 + Instagram feed.
   The phone is designed at 392 x 846 and scaled to fit by phone.js.
   ========================================================================= */
.sa{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  padding:clamp(26px,4.5vh,56px) 16px clamp(30px,5vh,60px);
  background:radial-gradient(60% 46% at 50% 58%,rgba(201,165,107,.22),rgba(201,165,107,0) 72%),
             linear-gradient(180deg,var(--ivory) 0%,var(--ivory-2) 100%)}
.sa__intro{text-align:center;max-width:620px;margin:0 auto clamp(16px,2.6vh,30px)}
.sa__intro .fb-eyebrow{margin-bottom:10px}
.sa__title{margin:0;font:500 clamp(32px, 3.4vw, 44px)/1.08 var(--display);letter-spacing:-.01em}
.sa__title em{font-style:italic;color:var(--accent)}
.sa__sub{margin:10px 0 0;font:400 18px/1.5 var(--sans);color:var(--muted)}

/* stage + the scaled phone */
.stage{position:relative;display:grid;place-items:center;width:100%}
.stage::after{content:"";position:absolute;left:50%;bottom:-18px;width:min(420px,80%);height:60px;transform:translateX(-50%);
  background:rgba(20,16,13,.38);filter:blur(26px);border-radius:50%;z-index:0;pointer-events:none}
.phone-wrap{position:relative;z-index:1}
.phone-fit{position:relative;width:392px;height:846px}
.phone-fit > .iphone{position:absolute;left:0;top:0;transform-origin:0 0}
.hint{margin:22px 0 0;font:400 16px/1.4 var(--sans);color:var(--faint);text-align:center}

/* ---------- iPhone 17 shell ---------- */
.iphone{--w:392px;--r:62px;width:var(--w);aspect-ratio:392/846;border-radius:var(--r);padding:11px;position:relative;
  background:linear-gradient(148deg,#6f6a63 0%,#100e0c 22%,#3a3631 48%,#100e0c 74%,#7b756c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 2px rgba(0,0,0,.6),
    0 60px 120px -30px rgba(20,16,13,.7),0 30px 60px -20px rgba(20,16,13,.45)}
.iphone::before{content:"";position:absolute;inset:8px;border-radius:calc(var(--r) - 8px);background:#000;z-index:0}
.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,.10) 0%,rgba(255,255,255,0) 34%)}
.btn-side{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#5d5850,#2a2724)}
.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%;border-radius:calc(var(--r) - 11px);overflow:hidden;background:#fff;color:#000;
  display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.screen a{text-decoration:none;color:inherit}

/* status bar */
.status{flex:none;height:54px;position:relative;display:flex;align-items:center;justify-content:space-between;padding:6px 30px 0 40px}
.status__time{font-weight:600;font-size:18px;letter-spacing:-.01em}
.status__icons{display:flex;align-items:center;gap:6px}
.status__icons svg{display:block}
.island{position:absolute;left:50%;top:11px;width:116px;height:33px;margin-left:-58px;background:#000;border-radius:20px}
.island::after{content:"";position:absolute;right:13px;top:11px;width:11px;height:11px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#2b3a55 0%,#0b0f18 60%,#000 100%)}

/* feed */
.feed{flex:1;min-height:0;overflow:hidden}
.ig-top{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 14px 0 14px}
.ig-logo{font-family:"Snell Roundhand","Segoe Script","Brush Script MT",cursive;font-size:32px;line-height:1;font-weight:600;letter-spacing:-.01em;padding-top:4px}
.ig-top__icons{display:flex;align-items:center;gap:20px}
.ig-ico{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:13px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}

.post-head{display:flex;align-items:center;gap:10px;height:54px;padding:0 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 span{display:block;width:100%;height:100%;border-radius:50%;border:2px solid #fff;
  background:#eee url(../assets/img/barb-white-sm.jpg) no-repeat;background-size:270% auto;background-position:52% 15%}
.post-head__who{flex:1;min-width:0;line-height:1.2}
.post-head__name{display:block;font-weight:600;font-size:16px}
.post-head__sp{display:block;font-size:14px;color:#737373}
.dots{width:22px;height:22px;fill:#000}

.post-media{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;background:#f1e9de}

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

.actions{position:relative;display:flex;align-items:center;gap:16px;height:46px;padding:0 13px}
.actions .spacer{flex:1}
.likes{padding:0 14px;font-weight:600;font-size:16px;line-height:1.3}
.caption{padding:4px 14px 0;font-size:16px;line-height:1.35}
.caption b{font-weight:600}
.caption .more{color:#737373}
.comments{padding:5px 14px 0;font-size:16px;color:#737373}
.stamp{padding:4px 14px 10px;font-size:13px;color:#737373}

.tabbar{flex:none;display:flex;align-items:center;justify-content:space-around;height:50px;border-top:.5px solid #dbdbdb;background:#fff;padding:0 6px}
.tabbar .ig-ico{width:26px;height:26px}
.tab-av{width:27px;height:27px;border-radius:50%;background:#ddd url(../assets/img/barb-white-sm.jpg) no-repeat;background-size:270% auto;background-position:52% 15%}
.homebar{flex:none;height:22px;display:grid;place-items:center;background:#fff}
.homebar::before{content:"";width:138px;height:5px;border-radius:3px;background:#000}

/* ---------- hand-drawn callout ---------- */
.callout{position:absolute;left:100%;display:flex;align-items:center;gap:6px;margin-left:10px;pointer-events:none;z-index:2;
  transform:translateY(-50%);transition:opacity .3s var(--ease)}
.callout svg{flex:none;width:96px;height:56px;max-width:none;overflow:visible}
.callout .ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:160;stroke-dashoffset:0}
.callout .ar{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bubble{position:relative;display:inline-block;white-space:nowrap;padding:12px 18px;border-radius:16px;transform:rotate(-3deg);
  background:linear-gradient(140deg,#9a6539,var(--accent-deep));color:var(--accent-ink);
  font:500 italic 24px/1.15 var(--display);box-shadow:0 14px 30px -14px rgba(111,69,36,.7)}
.js .fb-reveal .callout .ln{stroke-dashoffset:160}
.js .fb-reveal .callout .ar{opacity:0}
.js .fb-reveal.is-in .callout .ln{animation:drawln .9s .35s var(--ease) forwards}
.js .fb-reveal.is-in .callout .ar{animation:fadein .3s 1.15s forwards}
@keyframes drawln{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}

@media (max-width:980px){
  .callout{display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .fb-reveal .callout .ln{stroke-dashoffset:0;animation:none}
  .js .fb-reveal .callout .ar{opacity:1;animation:none}
}