/* =====================================================================
   DEMOS — one section per capability on the offer pages.
   Everything here is meant to look pulled out of the real world: a DM
   thread, a text-message reminder, a Google review with the owner's reply,
   a bag → message → order strip, an orders list, two Instagram profiles.
   Names inside the artwork are placeholders (Your Salon / Your Shop /
   @yourbusiness) and every page that carries one ends with the disclosure
   line. Artifacts play once when they scroll into view (.is-in from
   motion.js); reduced motion shows the finished state.
   ===================================================================== */

.demo{padding:72px 0}
.demo + .demo{padding-top:8px}
.demo-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.demo.flip .demo-grid > .demo-copy{order:2}
.demo-copy h2{margin-top:14px;font-size:clamp(25px,3.4vw,36px)}
.demo-copy .lede{margin-top:12px;font-size:17px}
.art{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 60px -36px rgba(33,63,120,.55);
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;color:var(--ink);overflow:hidden}
.demo-cta{grid-column:1 / -1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.demo-cta span{font-size:14px;color:var(--muted)}
@media (max-width:860px){.demo{padding:56px 0}.demo-grid{grid-template-columns:1fr;gap:28px}.demo.flip .demo-grid > .demo-copy{order:0}}

/* ---- sequential reveal shared by every artifact: children of .seq pop in
   one after another once the artifact is in view ---- */
html.js:not(.reduce) .seq > *{opacity:0;transform:translateY(7px)}
html.js:not(.reduce) .is-in .seq > *{animation:seqIn .55s cubic-bezier(.16,1,.3,1) var(--d,.4s) both}
.seq > :nth-child(1){--d:.4s}  .seq > :nth-child(2){--d:1.1s} .seq > :nth-child(3){--d:1.9s}
.seq > :nth-child(4){--d:2.7s} .seq > :nth-child(5){--d:3.5s} .seq > :nth-child(6){--d:4.3s}
.seq > :nth-child(7){--d:5.1s} .seq > :nth-child(8){--d:5.9s} .seq > :nth-child(9){--d:6.7s}
.seq > :nth-child(10){--d:7.5s}.seq > :nth-child(11){--d:8.3s}.seq > :nth-child(12){--d:9.1s}
/* a typing bubble takes a slot, shows its dots, then collapses just before the reply lands */
.im .typing{align-self:flex-end;background:var(--slate);border-radius:16px;border-bottom-right-radius:5px;padding:9px 12px;display:flex;gap:4px;align-items:center;max-height:40px;overflow:hidden}
.im .typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);animation:dot 1s infinite}
.im .typing i:nth-child(2){animation-delay:.15s}.im .typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
html.js:not(.reduce) .is-in .seq > .typing{animation:seqIn .3s ease var(--d,.4s) both,gone .25s ease calc(var(--d,.4s) + .55s) forwards}
@keyframes gone{to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-7px}}
html.reduce .im .typing,html:not(.js) .im .typing{display:none}
@keyframes seqIn{to{opacity:1;transform:none}}

/* ---- A. message thread (Instagram DM / SMS) ---- */
.im{max-width:420px;margin:0 auto}
.im-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--ivory-2)}
.im-head .av{width:30px;height:30px;border-radius:50%;background:var(--slate);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.im-head b{font-size:14px}
.im-head small{margin-left:auto;font-size:11.5px;color:var(--muted)}
.im-body{padding:14px;display:flex;flex-direction:column;gap:7px;min-height:150px}
.im .day{align-self:center;font-size:11px;color:var(--muted);margin:2px 0}
.im .msg{max-width:82%;padding:8px 12px;border-radius:16px;font-size:13.5px;line-height:1.35}
.im .msg.in{align-self:flex-start;background:#EFEFF1;border-bottom-left-radius:5px}
.im .msg.out{align-self:flex-end;background:var(--slate);color:#fff;border-bottom-right-radius:5px}
.im.sms .msg.out{background:#34C759}
.im .chip{align-self:center;margin-top:4px;font-size:12px;font-weight:600;color:var(--dark);background:rgba(62,78,102,.1);border-radius:100px;padding:6px 12px}
.im .chip::before{content:"\2713";margin-right:6px}

/* ---- B. Google review + the owner's reply ---- */
.rev{max-width:460px;margin:0 auto;padding:16px 18px}
.rev-top{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:12px}
.rev-top .g{width:22px;height:22px;border-radius:50%;border:2px solid var(--slate);color:var(--slate);display:grid;place-items:center;font-size:12px;font-weight:800;line-height:1}
.rev-top b{color:var(--ink)}
.rev-who{display:flex;align-items:center;gap:10px}
.rev-who .av{width:34px;height:34px;border-radius:50%;background:#E4E1DA;color:var(--slate);display:grid;place-items:center;font-size:14px;font-weight:700}
.rev-who b{display:block;font-size:14px}
.rev-who small{font-size:12px;color:var(--muted)}
.stars{display:flex;gap:2px;margin:8px 0 6px}
.stars svg{width:14px;height:14px;fill:#F4B400}
.rev-text{font-size:14.5px;line-height:1.45}
.rev-reply{margin-top:12px;padding:12px 14px;background:var(--ivory-2);border-left:3px solid var(--slate);border-radius:0 12px 12px 0}
.rev-reply small{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.rev-reply p{font-size:14px;line-height:1.45;color:var(--ink)}
.rev .seq{display:flex;flex-direction:column}

/* ---- C. bag → message → order (abandoned cart) ---- */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;background:none;border:0;box-shadow:none;overflow:visible}
.flow .fc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 22px 50px -34px rgba(33,63,120,.55);font-size:13px}
.flow .fc .k{margin-bottom:6px;font-size:11px}
.flow .fc b{display:block;font-size:14px;margin-bottom:3px}
.flow .fc small{color:var(--muted);font-size:12px;line-height:1.35;display:block}
.flow .arrow{color:var(--slate);opacity:.5;font-size:20px}
.flow .fc.msg-card{border-color:var(--slate)}
.flow .fc.msg-card p{font-size:13px;line-height:1.4;margin-top:4px}
.flow .fc.ok{background:var(--slate);color:#fff;border-color:var(--slate)}
.flow .fc.ok .k,.flow .fc.ok small{color:rgba(255,255,255,.75)}
.line-items{display:flex;gap:6px;margin-top:6px}
.line-items i{display:block;width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#DFE3EA,#C7CEDC)}
@media (max-width:860px){.flow{grid-template-columns:1fr}.flow .arrow{transform:rotate(90deg);justify-self:center}}

/* ---- C2. the abandoned-cart STORY, told top to bottom: the bag she left,
   the email that found her, the order she placed. One scroll starts it;
   each panel plays after the one before (§15). ---- */
.story{max-width:400px;margin:0 auto;display:grid;background:none;border:0;box-shadow:none;overflow:visible}
.story .sp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 15px;box-shadow:0 22px 50px -34px rgba(33,63,120,.55);position:relative}
.story .down{justify-self:center;color:var(--slate);opacity:.45;font-size:22px;line-height:1;padding:5px 0}
.story .sh{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);margin-bottom:9px}
.story .sh b{color:var(--ink);font-size:13px}
/* 1 · the bag */
.story .item{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:13px}
.story .item i{display:block;width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#DFE3EA,#C7CEDC)}
.story .item small{display:block;color:var(--muted);font-size:11.5px}
.story .item b{font-weight:600}
.story .chk{margin-top:8px;text-align:center;font-size:12.5px;font-weight:600;color:#fff;background:var(--slate);border-radius:100px;padding:8px}
.story .left{position:absolute;right:12px;top:10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A2B2B;background:#F6DEDE;border-radius:100px;padding:4px 9px}
/* 2 · the email */
.story .mail{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:start;font-size:13px}
.story .mail .av{width:34px;height:34px;border-radius:50%;background:var(--slate);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.story .mail b{display:block;font-size:13.5px}
.story .mail .sub{display:block;font-weight:600;margin-top:1px}
.story .mail .pre{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:2px}
.story .mail time{font-size:11.5px;color:var(--muted)}
.story .dot{position:absolute;left:6px;top:50%;width:8px;height:8px;border-radius:50%;background:#0a84ff;transform:translateY(-50%)}
/* 3 · paid */
.story .paid{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.story .paid svg{width:44px;height:44px}
.story .paid circle{fill:none;stroke:var(--slate);stroke-width:2.5}
.story .paid path{fill:none;stroke:var(--slate);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40}
.story .paid b{display:block;font-size:14px}
.story .paid small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:2px}
/* the play: hidden until the artifact is in view, then in order */
html.js:not(.reduce) .story .sp,html.js:not(.reduce) .story .down,html.js:not(.reduce) .story .item,html.js:not(.reduce) .story .left,
html.js:not(.reduce) .story .chk,html.js:not(.reduce) .story .dot{opacity:0}
html.js:not(.reduce) .story .sp{transform:translateY(8px)}
html.js:not(.reduce) .story .item{transform:translateX(-8px)}
html.js:not(.reduce) .story .s2{transform:translateX(24px)}
.story.is-in .s1{animation:seqIn .5s cubic-bezier(.16,1,.3,1) .3s both}
.story.is-in .s1 .item.i1{animation:seqIn .45s cubic-bezier(.16,1,.3,1) .8s both}
.story.is-in .s1 .item.i2{animation:seqIn .45s cubic-bezier(.16,1,.3,1) 1.15s both}
.story.is-in .s1 .chk{animation:seqIn .4s ease 1.5s both}
.story.is-in .s1 .left{animation:seqIn .4s ease 2.3s both}
.story.is-in .s1{--dim:1}
.story.is-in .d1{animation:seqIn .4s ease 2.9s both}
.story.is-in .s2{animation:seqIn .55s cubic-bezier(.16,1,.3,1) 3.3s both}
.story.is-in .s2 .dot{animation:seqIn .3s ease 4s both}
.story.is-in .d2{animation:seqIn .4s ease 4.6s both}
.story.is-in .s3{animation:seqIn .55s cubic-bezier(.16,1,.3,1) 5s both}
.story.is-in .paid path{animation:latteDraw .5s ease-out 5.5s forwards}
@keyframes latteDraw{to{stroke-dashoffset:0}}

/* ---- D. orders list (post-purchase → second order) ---- */
.orders{max-width:440px;margin:0 auto}
.orders .oh{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted);background:var(--ivory-2)}
.orders .oh b{color:var(--ink)}
.orders .seq{padding:6px 0}
.orders .row{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--line)}
.orders .row b{font-size:14px}
.orders .row small{color:var(--muted);font-size:12px}
.orders .row .amt{grid-row:1 / span 2;align-self:center;font-weight:700}
.orders .row.new{background:rgba(62,78,102,.08)}
.orders .row.new b::after{content:"NEW";font-size:9.5px;letter-spacing:.08em;background:var(--slate);color:#fff;border-radius:100px;padding:2px 6px;margin-left:8px;vertical-align:middle}
.orders .mail{margin:8px 16px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.4;background:#fff}
.orders .mail small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}

/* ---- E. two Instagram profiles, before / after. Same business, two feeds.
   Proportions follow the real mobile profile: top bar with the handle,
   avatar + name row, bio, Follow/Message row, highlights, grid/reels/tagged
   tabs, 3-across portrait tiles with 1px gutters. NO counts anywhere. ---- */
.ba{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:34px;justify-content:center;max-width:760px;margin:36px auto 0}
.ba .lbl{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:10px}
.ba .cap{grid-column:1 / -1;text-align:center;font-size:14.5px;color:var(--muted);max-width:56ch;margin:6px auto 0}
.ba .ba-cta{grid-column:1 / -1;text-align:center;margin-top:8px}
.ig{background:#fff;border:1px solid var(--line);border-radius:22px;padding:0 0 10px;box-shadow:0 26px 60px -36px rgba(33,63,120,.55);overflow:hidden;
  font-family:-apple-system,"SF Pro Text",Inter,system-ui,sans-serif;color:#000;font-size:11px}
.ig .igbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px;font-weight:700;font-size:13px}
.ig .igbar span{font-weight:400;color:#262626;letter-spacing:1px}
.ig-top{display:flex;align-items:center;gap:14px;padding:6px 12px 0}
.ig-top .av{width:66px;height:66px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #DBDBDB}
.ig-top .name{font-size:12.5px;font-weight:600}
.ig-top .cat{font-size:11px;color:#737373;margin-top:2px}
.ig .bio{font-size:11.5px;line-height:1.35;margin:8px 12px 0;color:#000}
.ig .btns{display:flex;gap:6px;margin:10px 12px 0}
.ig .btns span{flex:1;text-align:center;font-size:11.5px;font-weight:600;padding:6px 0;border-radius:8px;background:#EFEFEF;color:#000}
.ig .btns span:first-child{background:#0071C5;color:#fff}  /* IG blue, a shade deeper: white on it 5.05:1 */
.ig .btns span:last-child{flex:0 0 30px}
.ig .hl{display:flex;gap:12px;padding:12px 12px 8px;overflow:hidden}
.ig .hl div{display:grid;justify-items:center;gap:4px;font-size:9.5px;color:#262626}
.ig .hl i{display:block;width:44px;height:44px;border-radius:50%;background:#EFEFEF;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px #DBDBDB}
.ig .tabs{display:flex;border-top:1px solid #DBDBDB;margin-top:2px}
.ig .tabs span{flex:1;text-align:center;padding:8px 0 6px;font-size:14px;color:#737373}
.ig .tabs span:first-child{color:#000;border-bottom:1.5px solid #000}
.ig .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#fff}
.ig .tiles i{display:grid;place-items:center;aspect-ratio:4/5;background:#DDD;position:relative;overflow:hidden;font-style:normal;font-weight:800;color:#fff;
  font-size:9.5px;text-align:center;line-height:1.1;padding:4px;letter-spacing:.02em}
.ig .tiles i.vid::after{content:"\25B7";position:absolute;right:5px;top:4px;font-size:9px;opacity:.9}
/* before: a bit of everything, every holiday — a different colour AND a different font on every tile */
.ig.before .av{background:linear-gradient(135deg,#F0A,#F80)}
.ig.before .t1{background:#DE2E3C;font-family:Impact,"Arial Black",sans-serif;font-weight:400;font-size:10.5px;letter-spacing:.04em}
.ig.before .t2{background:linear-gradient(90deg,#8d99ae 50%,#f4a261 50%);font-family:"Arial Black",Arial,sans-serif;font-size:8.5px}
.ig.before .t3{background:linear-gradient(135deg,#1B5E20,#C62828);font-family:"Brush Script MT","Snell Roundhand",cursive;font-weight:400;font-size:11px;letter-spacing:0}
.ig.before .t4{background:#FFB703;color:#000;font-family:"Comic Sans MS","Chalkboard SE","Marker Felt",cursive;font-size:10px}
.ig.before .t5{background:linear-gradient(135deg,#606c38,#283618);filter:blur(.6px)}
.ig.before .t6{background:linear-gradient(135deg,#0d1b2a,#c9a227);font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:700;font-size:9px}
.ig.before .t7{background:#E0157A;font-family:"Courier New",Courier,monospace;font-size:9.5px}
.ig.before .t8{background:linear-gradient(90deg,#adb5bd 50%,#e9c46a 50%);font-family:Verdana,Geneva,sans-serif;font-size:8px}
.ig.before .t9{background:linear-gradient(135deg,#4a148c,#ff6f00);font-family:Papyrus,"Trebuchet MS",fantasy;font-size:9px;font-weight:700}

/* after: the SAME warm reds/corals as the before feed, now a deliberate palette —
   coral dominant · cream neutral · berry accent — one serif typeface on every text
   post, one framing treatment on every tile, the highlight covers as one set.
   Chaos → intention, never colourful → beige. Cream on coral 4.69:1, berry on cream 9.9:1. */
.ig.after{--coral:#C4392A;--cream:#FBEFE6;--blush:#F6DDD3;--berry:#6B1F35;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
.ig.after .bio{font-size:11px;letter-spacing:-.005em;margin-left:10px;margin-right:8px}
.ig.after .av{background:var(--coral);display:grid;place-items:center;color:var(--cream);font-family:var(--serif);font-style:italic;font-size:22px;letter-spacing:-.02em}
.ig.after .av::before{content:"yb."}
.ig.after .hl i{background:var(--cream);box-shadow:0 0 0 1.5px #fff,0 0 0 3px var(--coral);display:grid;place-items:center;font-style:italic;font-family:var(--serif);font-size:19px;color:var(--berry);line-height:1}
/* every tile: the same inset hairline frame (outline drawn inward) */
.ig.after .tiles i{outline:1px solid rgba(251,239,230,.42);outline-offset:-6px;border-radius:2px}
/* text posts: one typeface, one placement — serif italic, bottom-left, always */
.ig.after .tiles i.tx{place-items:end start;text-align:left;padding:8px 9px;font-family:var(--serif);font-style:italic;font-weight:400;font-size:11.5px;line-height:1.15;letter-spacing:-.01em;text-transform:none}
/* photo-like tiles: the palette as light and shadow */
.ig.after .tiles i.pic::before{content:"";position:absolute;right:16%;bottom:14%;width:46%;height:46%;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%)}
.ig.after .t3::before,.ig.after .t7::before{right:auto;bottom:auto;left:14%;top:18%;width:40%;height:40%}
.ig.after .t1{background:linear-gradient(160deg,#8C2547,#4A1424)}
.ig.after .t2{background:var(--cream);color:var(--berry)}
.ig.after .t3{background:linear-gradient(160deg,#E0664F,#B83124)}
.ig.after .t4{background:var(--coral);color:var(--cream)}
.ig.after .t5{background:var(--berry);color:var(--cream)}
.ig.after .t6{background:linear-gradient(160deg,#F6DDD3,#E4A995)}
.ig.after .t7{background:linear-gradient(160deg,#FBEFE6,#E8B9A8)}
.ig.after .t8{background:var(--cream);color:var(--berry)}
.ig.after .t9{background:var(--coral);color:var(--cream)}
.ig.after .t2,.ig.after .t6,.ig.after .t7,.ig.after .t8{outline-color:rgba(107,31,53,.28)}
.ig.after .t8.vid::after{color:var(--berry)}
/* the heading above the mocks: no orphaned "chosen." under the nav */
#before-after h2{text-wrap:balance}
html.js:not(.reduce) .ig .tiles i{opacity:0;transform:scale(.92)}
html.js:not(.reduce) .is-in .ig .tiles i{animation:seqIn .5s cubic-bezier(.16,1,.3,1) both}
.is-in .ig .tiles i:nth-child(1){animation-delay:.2s}.is-in .ig .tiles i:nth-child(2){animation-delay:.3s}.is-in .ig .tiles i:nth-child(3){animation-delay:.4s}
.is-in .ig .tiles i:nth-child(4){animation-delay:.5s}.is-in .ig .tiles i:nth-child(5){animation-delay:.6s}.is-in .ig .tiles i:nth-child(6){animation-delay:.7s}
.is-in .ig .tiles i:nth-child(7){animation-delay:.8s}.is-in .ig .tiles i:nth-child(8){animation-delay:.9s}.is-in .ig .tiles i:nth-child(9){animation-delay:1s}
@media (max-width:640px){.ba{grid-template-columns:minmax(0,300px)}}
/* big screens: the two mocks scale up together (zoom keeps every proportion) instead of sitting at 280px on a 2560 canvas */
@media (min-width:1900px){.ba{grid-template-columns:repeat(2,minmax(0,360px));gap:44px;max-width:900px}.ba .ig{zoom:1.285}}

/* ---- the disclosure, on every page that carries a mock outcome ---- */
.disclose{text-align:center;font-size:12.5px;color:var(--muted);padding:0 24px 34px;max-width:60ch;margin:0 auto}