/* The DM solution pages (site-src/gen/dm/solutions.py, agent N): /manychat-alternative, /manychat-pricing,
   /instagram-auto-reply. Class prefix so-. Tokens from system.css; Instagram's colours only inside the phones (--ig-*),
   rival marks only as their own files. */

/* ───────────── shared: the stage box, labels, the phone, the caption line ───────────── */
.so-sg, .so-bt, .so-ar { margin: 0; }
/* an element shows from its beat. The first beat's elements are also there before the clock starts (before the script runs,
   before the scene scrolls into view), so the stage never paints empty and beat 0 moves nothing (H1); `gone` = past its data-x */
:is(.so-sg, .so-bt, .so-ar) [data-in]:not(.on):not([data-in='0']), :is(.so-sg, .so-bt, .so-ar) [data-in='0'].gone { display: none; }
.so-on { display: none !important; }
.so-box { position: relative; display: grid; justify-items: center; padding: var(--s-12) var(--s-6) var(--s-8); border-radius: var(--r-2xl); background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-card); overflow: clip; }
.so-box::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, color-mix(in srgb, var(--ink-4) 32%, transparent) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); pointer-events: none; }
.so-box { grid-template-columns: minmax(0, 1fr); }   /* the box names its column (KIT.md § 6.1); the kit's fit takes the padding off */
.so-sg-stage, .so-bt-stage, .so-ar-stage { font-family: var(--font); text-align: start; }
.is-reset .so-sg-stage, .is-reset .so-bt-stage, .is-reset .so-ar-stage { opacity: 0; transition: opacity 0.6s var(--ease); }
.so-pl { margin: 0; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 650; color: var(--ink); white-space: nowrap; }
.so-phone { width: 272px !important; height: 584px !important; padding: 10px; border-radius: 48px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.14), inset 0 0 0 5px #0b0c0e, 0 30px 60px -22px rgb(15 23 42 / 0.42), 0 0 0 1px rgb(0 0 0 / 0.55); }
.so-phone .ps-screen { border-radius: 39px; }
.so-phone .ps-btn-a { top: 110px; } .so-phone .ps-btn-b { top: 150px; } .so-phone .ps-btn-c { top: 164px; }
.so-cap { margin: var(--s-4) auto 0; max-width: 760px; text-align: center; font-size: var(--t-caption); line-height: 1.5; color: var(--ink-3c); }
.so-line { display: none; }
@keyframes so-in { from { opacity: 0; transform: translateY(6px); } }

/* the avatars and comments inside a phone (Instagram's comment row) */
.so-av { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--instagram) 13%, #fff); color: color-mix(in srgb, var(--instagram) 80%, var(--ink)); font-size: 12px; font-weight: 700; }
.so-av.c2 { background: color-mix(in srgb, var(--step-blue) 13%, #fff); color: color-mix(in srgb, var(--step-blue) 80%, var(--ink)); }
.so-av.c3 { background: color-mix(in srgb, var(--step-amber) 15%, #fff); color: color-mix(in srgb, var(--step-amber) 60%, var(--ink)); }
.so-av.c4 { background: color-mix(in srgb, var(--step-teal) 14%, #fff); color: color-mix(in srgb, var(--step-teal) 65%, var(--ink)); }
.so-av.c5 { background: color-mix(in srgb, var(--step-violet) 13%, #fff); color: var(--step-violet); }
.so-cms { list-style: none; margin: 0; padding: 0; }
.so-cm { display: grid; grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 9px; padding: 7px 0; }
.so-cm.on { animation: so-in 0.4s var(--ease) backwards; }
.so-cm > div { min-width: 0; }
.so-cm p { margin: 0; }
.so-cm-n { display: flex; gap: 6px; font-size: 11.5px; color: #000; }
.so-cm-n b { font-weight: 650; }
.so-cm-n time { color: var(--ig-meta); }
.so-cm-t { font-size: 12.5px; line-height: 1.35; color: #000; overflow-wrap: anywhere; }
.so-cm-l { padding-top: 6px; color: var(--ig-meta); }
.so-cm-l .ig-g { width: 12px; height: 12px; }
.so-ph-h, .so-ar-ch { position: absolute; inset: 42px 0 auto; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #efefef; color: #000; background: #fff; }
.so-ph-h b, .so-ar-ch b { font-size: 14.5px; font-weight: 700; }
.so-ph-h .ig-g, .so-ar-ch .ig-g { width: 21px; height: 21px; }
.so-ph-cap { position: absolute; inset: 82px 0 auto; display: flex; gap: 9px; padding: 10px 14px; border-bottom: 1px solid #efefef; background: #fff; }
.so-ph-cap img { width: 28px; height: 28px; flex: none; border-radius: 50%; object-fit: cover; }
.so-ph-cap p { margin: 0; font-size: 12px; line-height: 1.38; color: #000; }
.so-ph-k { position: absolute; inset: 160px 0 auto; margin: 0; padding: 8px 14px 0; font-size: 11.5px; font-weight: 650; color: var(--ig-meta); }
.so-ph-count.on { animation: so-in 0.35s var(--ease) backwards; }
.so-sg .so-cms { position: absolute; inset: 184px 0 58px; padding: 0 14px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.so-sg .so-cm { background: color-mix(in srgb, var(--ig-blue) 4%, #fff); margin-inline: -14px; padding-inline: 14px; }
.so-ph-add { position: absolute; inset: auto 0 14px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.so-ph-add .ig-me { width: 24px; height: 24px; }
.so-ph-add p { flex: 1; min-width: 0; margin: 0; padding: 7px 12px; border: 1px solid #dbdbdb; border-radius: 22px; font-size: 12px; color: var(--ig-meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-at { color: #00376b; }

/* the switch (the app's) */
.so-sw { position: relative; width: 34px; height: 20px; flex: none; border-radius: 10px; background: var(--ink-4); }
.so-sw i { position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(15 23 42 / 0.25); }
.so-sw.is-on { background: var(--accent); }
.so-sw.is-on i { left: auto; right: 2px; }

/* the watchdog mark beside a name */
.so-bl-mark { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); }
.so-bl-mark img { width: 20px; height: 20px; }

/* ───────────── /manychat-alternative: the reel takes off ───────────── */
.so-sg-stage { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 48px; }
.so-sg-ph, .so-sg-bills { display: grid; align-content: start; gap: 12px; }
.so-sg-bills { align-content: center; }
.so-sg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.so-bl { display: grid; align-content: start; gap: 14px; padding: 20px; border-radius: 18px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); }
.so-bl.is-them { background: var(--line-soft); box-shadow: none; }
.so-bl.is-us { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-pop); }
.so-bl p { margin: 0; }
.so-bl-h { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: var(--hairline) solid var(--line); }
.so-bl-h > img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.so-bl-h b { font-size: 15px; font-weight: 650; color: var(--ink); }
.so-bl-h > span:last-child { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.so-mt { display: grid; gap: 8px; }
.so-mt-bar { position: relative; height: 12px; border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.so-mt-f { position: absolute; inset: 0; border-radius: 6px; background: color-mix(in srgb, var(--danger) 70%, var(--step-amber)); transform: translateX(calc(var(--p) * 1% - 100%)); }
.so-mt-f.on { animation: so-grow 0.8s var(--ease) backwards; }
.so-mt-f.is-over { background: var(--danger); }
@keyframes so-grow { from { transform: translateX(-100%); } }   /* slides in under the bar's own clip: no layout per frame (H1) */
.so-mt-t { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%); width: 2px; background: var(--surface); }
.so-mt-l { font-size: 12.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.so-bl-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--ink); }
.so-bl-plan { font-weight: 650; }
.so-bl-sub { font-size: 12px; color: var(--ink-3); }
.so-bl-row.is-x { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.so-bl-tot { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: var(--hairline) solid var(--line); }
.so-bl-tot > span { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.so-bl-tot b { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.is-them .so-bl-tot b { color: var(--danger-ink); }
.is-us .so-bl-tot b { color: var(--accent-ink); }
.so-bl-amt { display: inline-block; }
.so-bl-amt.on { animation: so-in 0.4s var(--ease) backwards; }
.so-bl-up { position: absolute; right: 0; top: -14px; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger-ink); font-size: 11.5px; font-weight: 700; animation: so-in 0.4s var(--ease) backwards; }
.so-up-i { width: 12px; height: 12px; transform: rotate(-90deg); }
.so-bl-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--danger-ink); }
.so-bl-note .i { width: 15px; height: 15px; flex: none; }
.so-bl-note.is-ok { color: var(--accent-ink); }
.so-us-p { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
.so-us-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.so-us-k .i { width: 15px; height: 15px; }
.so-us-p > b { grid-row: 2; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.so-us-n { display: inline-block; }
.so-us-n.on { animation: so-in 0.4s var(--ease) backwards; }
.so-us-u { grid-row: 1 / 3; grid-column: 2; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.so-us-u .i { width: 14px; height: 14px; stroke-width: 2.6; }

/* the ladder under the bills: every count of the month at once, the one playing lit */
.so-ld { display: grid; grid-template-columns: 172px minmax(0, 1fr); margin-top: 8px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); overflow: hidden; }
.so-ld-h { margin: 0; display: grid; grid-template-rows: repeat(3, 38px); align-items: center; padding: 8px 0 8px 16px; background: var(--canvas); border-inline-end: var(--hairline) solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.so-ld-h span { display: flex; align-items: center; gap: 7px; }
.so-ld-h img { width: 16px; height: 16px; border-radius: 4px; }
.so-ld-h .is-t { color: var(--danger-ink); }
.so-ld-h .is-u { color: var(--accent-ink); }
.so-ld ol { list-style: none; margin: 0; padding: 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.so-ld li { position: relative; display: grid; grid-template-rows: repeat(3, 38px); align-items: center; justify-items: center; border-radius: 10px; font-variant-numeric: tabular-nums; transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.so-ld-n { font-size: 13px; font-weight: 650; color: var(--ink-2); }
.so-ld-t { font-size: 16px; font-weight: 700; color: var(--danger-ink); }
.so-ld-u { font-size: 16px; font-weight: 700; color: var(--accent-ink); }
.so-ld li:has(.so-on.on) { background: var(--canvas); box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.so-sg-stage:has(.so-ld .so-on.on) .so-ld li:not(:has(.so-on.on)) .so-ld-t { color: var(--danger); font-weight: 600; }

/* ───────────── the ManyChat comparison: one rival column ───────────── */
.so-cx .cx-logos { grid-template-columns: auto; }
.so-cx .cx-lg img { border-radius: 10px; }
.so-src a, .so-own-src a, .kit-source a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.so-src a:hover, .so-own-src a:hover, .kit-source a:hover { color: var(--ink); text-decoration-color: currentColor; }
.so-src { max-width: 760px; margin-inline: auto; line-height: 1.55; }
.pk-row.is-tot { padding-top: 6px; border-top: var(--hairline) solid var(--line); font-weight: 700; color: var(--ink); }
.pk-pill.is-bad { background: var(--danger-soft); color: var(--danger-ink); }
.so-ig-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.so-ig-mark .i { width: 22px; height: 22px; }
.so-ig-lg > span:last-child { white-space: normal !important; text-align: center; }
/* up to 1000px the shared comparison hides every span in a rival's head (system.css .cx-lg span), which left this head an empty box (QF2, 2026-10-08): its mark is a span, not an img. The mark and the words stay, at the rivals' phone size. */
@media (max-width: 1000px) { .so-cx .so-ig-lg .so-ig-mark { display: grid; } .so-cx .so-ig-lg > span:last-child { display: block; } }
@media (max-width: 760px) { .so-cx .so-ig-lg .so-ig-mark { width: 26px; height: 26px; border-radius: 7px; } .so-cx .so-ig-lg .so-ig-mark .i { width: 16px; height: 16px; } .so-cx .so-ig-lg > span:last-child { font-size: 11px; } }

/* touch (KIT.md § 6.9): the 22px eye beside a row answers 44px through an invisible ::after; the 40px button under the table
   is 44 tall on a coarse pointer (its own ::after is the raised button's sheen, so it cannot carry a hit area) */
.so-cx .cx-eye { position: relative; }
.so-cx .cx-eye::after { content: ''; position: absolute; inset: -11px; }
@media (pointer: coarse) { .so-cx .cx-cta .btn { min-height: 44px; } }

/* ───────────── small pictures for steps() ───────────── */
.so-mini { width: 100%; max-width: 250px; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-family: var(--font); }
.so-mini p { margin: 0; }
.so-mini-fb { display: flex; align-items: center; justify-content: center; gap: 8px; height: 38px; border-radius: 10px; background: var(--facebook); color: #fff; font-size: 13px; font-weight: 650; }
.so-mini-fb .i { width: 17px; height: 17px; color: #fff; }
.so-mini-fb .i * { fill: currentColor; }
.so-mini-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.so-mini-pages li, .so-mini-l li { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; }
.so-mini-pages img, .so-mini-l img { width: 26px; height: 26px; flex: none; border-radius: 50%; object-fit: cover; }
.so-mini-pages b { flex: 1; min-width: 0; font-weight: 650; color: var(--ink); }
.so-mini-pages .i { width: 15px; height: 15px; }
.so-mini-att { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 8px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.so-mini-att .i { width: 14px; height: 14px; color: var(--ink-3); }
.so-mini-say { justify-self: end; padding: 7px 11px; border-radius: 12px 12px 4px 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 600; }
.so-mini-node { --g: var(--accent); display: flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: 9px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), inset 3px 0 0 var(--g); font-size: 12px; font-weight: 600; color: var(--ink); }
.so-mini-node .i { width: 14px; height: 14px; color: var(--g); }
.so-mini-node.f-start { --g: var(--accent); } .so-mini-node.f-comment { --g: var(--step-pink, var(--instagram)); } .so-mini-node.f-send { --g: var(--step-blue); }
.so-mini-t { grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; }
.so-qr { position: relative; width: 76px; height: 76px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.so-qr i { position: absolute; left: calc(8px + var(--x) * 8.6px); top: calc(8px + var(--y) * 8.6px); width: 8px; height: 8px; border-radius: 1.5px; background: var(--ink); }
.so-mini-t p { display: grid; gap: 3px; font-size: 12px; line-height: 1.4; color: var(--ink-3); }
.so-mini-t b { font-size: 13px; color: var(--ink); }
.so-mini-l li p { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.so-mini-l li b { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.so-mini-l li p span { font-size: 11.5px; color: var(--ink-3); }
.so-mini-l li:not(.is-us) { background: transparent; box-shadow: 0 0 0 1px var(--line-soft); }
.so-mini-l li:not(.is-us) img { opacity: 0.7; }
.so-mini-l li.is-us { box-shadow: 0 0 0 1px var(--accent-line), 0 0 0 3px var(--accent-soft); }
.so-mini-mark { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); }
.so-mini-mark img { width: 18px; height: 18px; }
.so-mini-st { display: flex; flex-wrap: wrap; gap: 6px; }
.so-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.so-chip .i { width: 14px; height: 14px; color: var(--accent); }
.so-mini-msg .so-mini-say { justify-self: start; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); font-weight: 500; }
.so-mini-msg .so-mini-say b { color: var(--accent-ink); }
.so-mini-bub { display: grid; border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.so-mini-bub p { padding: 8px 11px; font-size: 12.5px; color: var(--ink); }
.so-mini-btn { border-top: var(--hairline) solid var(--line-soft); text-align: center; font-weight: 650; color: var(--accent-ink) !important; }
.so-mini-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; }
.so-mini-row b { font-weight: 650; color: var(--ink); }
.so-mini-stat { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.so-mini-stat .i { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--accent); color: var(--hero-ink); stroke-width: 3; }

/* ───────────── the plan card (what $29 buys) ───────────── */
.so-plan { width: 100%; max-width: 440px; justify-self: center; display: grid; gap: var(--s-5); padding: var(--s-8); border-radius: var(--r-2xl); background: var(--surface); border: var(--hairline) solid var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-card); }
.so-plan p { margin: 0; }
.so-plan-h { display: grid; gap: 2px; }
.so-plan-h span { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.so-plan-h b { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); }
.so-plan-h small { font-size: var(--t-small); color: var(--ink-3); }
.so-plan-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.so-plan-l li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
.so-plan-l .i { width: 18px; height: 18px; margin-top: 2px; color: var(--accent); }
.so-plan-l p { display: grid; gap: 1px; }
.so-plan-l b { font-size: 15px; font-weight: 650; color: var(--ink); }
.so-plan-l span { font-size: 13.5px; color: var(--ink-3); }
.so-plan-btn { justify-content: center; width: 100%; }
/* translated: "Commencer l’essai gratuit" with its mark is wider than the card's inside at 320px and widened the page by up to 34px; the label takes two lines there (LF, 2026-10-10) */
html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .so-plan > * { min-width: 0; }
html:is([lang='es'], [lang='fr'], [lang='pt-BR'], [lang='ar']) .so-plan-btn { height: auto; min-height: calc(var(--btn-h) + 8px); padding-block: 8px; white-space: normal; text-align: center; text-wrap: balance; line-height: 1.2; }
.so-plan-t { text-align: center; font-size: var(--t-caption); color: var(--ink-3c); }

/* ───────────── /manychat-pricing: the one table, played ───────────── */
.so-bt-stage { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 36px; align-items: start; }
.so-ot { border-radius: 18px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-pop); overflow: hidden; }
.so-ot-h { margin: 0; display: flex; align-items: baseline; justify-content: space-between; padding: 16px 20px; border-bottom: var(--hairline) solid var(--line); }
.so-ot-h b { font-size: 15px; font-weight: 650; color: var(--ink); }
.so-ot-h span { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.so-ot table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.so-ot thead th, .so-ot thead td { padding: 10px 14px; text-align: start; font-size: 11.5px; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); background: var(--line-soft); }
.so-ot tbody th, .so-ot tbody td { padding: 14px; text-align: start; border-top: var(--hairline) solid var(--line-soft); color: var(--ink-2); }
.so-ot tbody th { font-weight: 650; color: var(--ink); }
.so-ot td:first-child { width: 4px; padding: 0; }
.so-tr { position: relative; transition: background 0.35s var(--ease); }
.so-tr:has(.so-on.on) { background: color-mix(in srgb, var(--danger-soft) 70%, var(--surface)); }
.so-tr:has(.so-on.on) td:first-child { background: var(--danger); }
.so-tr:has(.so-on.on) th, .so-tr:has(.so-on.on) td { color: var(--ink); }
.so-bt-stage:has(.so-on.on) .so-tr:not(:has(.so-on.on)) th { color: var(--ink-2); font-weight: 600; }
.so-bt-stage:has(.so-on.on) .so-tr:not(:has(.so-on.on)) td { color: var(--ink-3); }
.so-rc { display: grid; gap: 14px; }
.so-rc p { margin: 0; }
.so-rc-c { display: grid; gap: 2px; padding: 16px 20px; border-radius: 18px; background: var(--surface); border: var(--hairline) solid var(--line); }
.so-rc-c > span { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.so-rc-c b { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.so-rc-n { display: inline-block; }
.so-rc-n.on { animation: so-in 0.4s var(--ease) backwards; }
.so-rc-r { display: grid; gap: 8px; padding: 16px 20px; border-radius: 18px; background: var(--line-soft); min-height: 168px; align-content: start; }
.so-rc-k { font-size: 12px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.so-rc-l { display: grid; gap: 7px; }
.so-rc-l.on { animation: so-in 0.4s var(--ease) backwards; }
.so-rc-l p { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.so-rc-l p.is-x { font-size: 13px; color: var(--ink-3); }
.so-rc-l p.is-over { color: var(--danger-ink); font-weight: 600; }
.so-rc-l p.is-tot { padding-top: 9px; border-top: var(--hairline) solid var(--line); font-weight: 650; }
.so-rc-l p.is-tot span:last-child { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--danger-ink); }
.so-rc-us { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: var(--surface); border: var(--hairline) solid var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.so-rc-us p { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
.so-rc-us p b { font-size: 14px; font-weight: 650; color: var(--ink); }
.so-rc-us p span { font-size: 12.5px; color: var(--ink-3); }
.so-rc-29 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-ink); }

/* the full plan tables */
.so-pt .kit-table { font-variant-numeric: tabular-nums; }
.so-pt .kit-table td a { color: var(--ink-2); }
.so-pt.is-us tbody th { color: var(--accent-ink); }
/* a phone (H1): the kit folds a table to its rows and drops the head, which a three-column limits table survives and a
   seven-column plan table does not (seven unnamed numbers a plan). Each value carries its column's name (data-l). */
@media (max-width: 640px) {
  .so-pt .kit-table tr { gap: 6px var(--s-3); padding-block: var(--s-4); }
  .so-pt .kit-table tbody th { grid-column: 1; grid-row: 1; font-size: 16px; }
  .so-pt .kit-table tbody td { grid-column: 1 / -1 !important; grid-row: auto !important; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); white-space: normal; text-align: end; }
  .so-pt .kit-table tbody td::before { content: attr(data-l); flex: none; font-size: 13.5px; color: var(--ink-3c); text-align: start; }
  .so-pt .kit-table tbody td.so-pt-src { grid-column: 2 !important; grid-row: 1 !important; display: block; align-self: center; }
  .so-pt .kit-table tbody td.so-pt-src::before { content: none; }
  .so-pt .kit-table td.so-pt-src a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}

/* what grows the bill: three moments */
.so-grow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.so-grow-c { display: grid; align-content: start; gap: var(--s-3); }
.so-grow-c h3 { margin: var(--s-2) 0 0; display: flex; align-items: center; gap: 8px; font-size: var(--t-h3); letter-spacing: -0.01em; color: var(--ink); }
.so-grow-c h3 .i { width: 20px; height: 20px; color: var(--accent); }
.so-grow-c > p { margin: 0; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
.so-grow-v { display: grid; place-items: center; height: 210px; padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); border: var(--hairline) solid var(--line); }
.so-gv { width: 100%; max-width: 260px; display: grid; gap: 8px; font-family: var(--font); color: #000; }
.so-gv p { margin: 0; }
.so-gv-n { justify-self: start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger-ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.so-gv .so-cms { display: grid; gap: 6px; }
.so-gv .so-cm { padding: 6px 8px; border-radius: 10px; background: color-mix(in srgb, var(--ig-blue) 4%, #fff); }
.so-gv-dm { display: grid; gap: 6px; }
.so-gv-dm .ig-ctx { margin: 0; justify-self: end; font-size: 11px; }
.so-gv-dm .ig-b { font-size: 13px; }

/* ───────────── /instagram-auto-reply: every kind of message, answered ───────────── */
.so-ar-stage { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 64px; align-items: center; }
.so-ar-list { display: grid; gap: 12px; }
.so-ar-lh { margin: 0 0 4px; display: flex; align-items: baseline; justify-content: space-between; }
.so-ar-lh b { font-size: 16px; font-weight: 650; color: var(--ink); }
.so-ar-lh span { font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.so-ar-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.so-ar-r { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-lift); transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); }
.so-ar-r::before { content: ''; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); opacity: 0; transition: opacity 0.35s var(--ease); }
.so-ar-stage:has(.so-on.on) .so-ar-r:not(:has(.so-on.on)) { background-color: var(--canvas); box-shadow: none; border-color: var(--line-soft); }
.so-ar-r:has(.so-on.on) { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-pop); }
.so-ar-r:has(.so-on.on)::before { opacity: 1; }
.so-ar-i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent-ink); }
.so-ar-i .i { width: 19px; height: 19px; }
.so-ar-r p { margin: 0; display: grid; gap: 2px; min-width: 0; }
.so-ar-k { font-size: 12px; font-weight: 650; color: var(--ink-3); }
.so-ar-r b { font-size: 15px; font-weight: 650; color: var(--ink); }
.so-ar-s { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.so-ar-s .i { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: var(--rail); color: var(--ink-3); stroke-width: 3; }
.so-ar-r:has(.so-on.on) .so-ar-s { color: var(--accent-ink); font-weight: 600; }
.so-ar-r:has(.so-on.on) .so-ar-s .i { background: var(--accent); color: var(--hero-ink); }
.so-ar-ph { display: grid; justify-items: center; }
.so-ar-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; color: #000; }
.so-ar-scr.on { animation: dmh-cut-in 0.45s var(--ease) backwards; }
.so-ar-scr .ig-dm-h { padding-top: 50px; }
.so-ar-scr .ig-dm-h .so-av { width: 30px; height: 30px; }
.so-ar-th { padding-top: 10px !important; }
.so-ar-th .ig-b { font-size: 13px; }
.so-ar-th .ig-m.on { animation: so-in 0.4s var(--ease) backwards; }
.so-ar .so-cms.is-ar { position: absolute; inset: 160px 0 0; padding: 4px 14px; }
.so-ar-rep { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; margin-top: 7px; font-size: 12px; line-height: 1.35; animation: so-in 0.45s var(--ease) backwards; }
.so-ar-rep img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.so-ar-rep b { font-weight: 650; }
.so-ar-ban { position: absolute; z-index: 10; left: 8px; right: 8px; top: 40px; display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 16px; background: rgb(255 255 255 / 0.97); box-shadow: 0 8px 24px rgb(0 0 0 / 0.16), 0 0 0 1px rgb(0 0 0 / 0.06); animation: so-drop 0.45s var(--ease) backwards; }
.so-ar-ban img { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
.so-ar-ban p { margin: 0; min-width: 0; display: grid; font-size: 12px; line-height: 1.3; }
.so-ar-ban span { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes so-drop { from { opacity: 0; transform: translateY(-14px); } }
.so-ar-prof { flex: none; display: grid; justify-items: center; gap: 2px; padding: 22px 12px 8px; text-align: center; }
.so-ar-prof img { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; }
.so-ar-prof b { font-size: 14px; font-weight: 700; }
.so-ar-prof span { font-size: 11.5px; color: var(--ig-meta); }
.so-ar-prof .so-ar-vp { margin-top: 8px; padding: 5px 12px; border-radius: 8px; background: var(--ig-grey); color: #000; font-weight: 600; }
.so-ar-story .kit-ig-col { justify-items: end; }
.so-ar-sl { margin: 0; font-size: 11px; color: var(--ig-meta); }
.so-ar-story img { width: 74px; height: 128px; border-radius: 12px; object-fit: cover; }

/* Instagram's own tools: two honest cards */
.so-own { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.so-own-c { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-8); border-radius: var(--r-xl); background: var(--canvas); border: var(--hairline) solid var(--line); }
.so-own-c h3 { margin: 0; font-size: var(--t-card); letter-spacing: -0.015em; color: var(--ink); }
.so-own-k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3c); }
.so-own-k .i { width: 16px; height: 16px; }
.so-own-s { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.so-own-s li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; }
.so-own-s li > span { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.so-own-s p { margin: 2px 0 0; font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); }
.so-own-s b { font-weight: 650; color: var(--ink); }
.so-own-n { list-style: none; margin: 0; padding: var(--s-4) 0 0; display: grid; gap: 8px; border-top: var(--hairline) solid var(--line); }
.so-own-n li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: var(--t-small); line-height: 1.5; color: var(--ink-3c); }
.so-own-n .i { width: 15px; height: 15px; margin-top: 3px; color: var(--ink-4); }
.so-own-src { margin: 0; font-size: var(--t-caption); color: var(--ink-3c); }

/* ───────────── a phone: ONE surface at a time ─────────────
   PLAN §2 (Anant: everything fits the viewport on a phone). Under 860px each stage is 260 wide and never scaled down, so
   the text keeps its size: the surface the story is on (a phone's bare screen or one panel, 260 x 316), its name under
   it, then the line that says what is happening. Agent S's helper, 2026-10-07. */
.so-vcap { display: none; }
@media (max-width: 860px) {
  .so-box { padding: var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-xl); }
  .so-box::before { display: none; }
  .so-sg .so-sg-stage, .so-bt .so-bt-stage, .so-ar .so-ar-stage { display: grid; grid-template-columns: 260px; grid-template-rows: 316px auto; gap: 8px 0; align-items: start; justify-items: stretch; }
  .so-vcap { grid-area: 2 / 1; display: grid; justify-items: center; margin: 0; }
  .so-vcap span { grid-area: 1 / 1; font-size: 11.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3c); text-align: center; }
  .so-line { display: grid; justify-items: center; margin: var(--s-3) 0 0; min-height: 30px; }
  .so-line-t { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; max-width: 100%; padding: 5px 12px; border-radius: 15px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-lift); font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink); text-align: center; }
  /* every line keeps its place in the one cell (hidden, still measured): the pill row is as tall as its longest line on every
     beat, so the page under the scene never moves when a sentence wraps (it grew and shrank 10 to 15px in the loop; H1) */
  :is(.so-sg, .so-bt, .so-ar) .so-line .so-line-t:not(.on) { display: inline-flex; visibility: hidden; }
  :is(.so-sg, .so-bt, .so-ar) .so-line .so-line-t[data-in='0']:not(.on):not(.gone) { visibility: visible; }
  .so-line-t.on { animation: so-in 0.35s var(--ease) backwards; }
  .so-line-t .i { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--accent); color: var(--hero-ink); stroke-width: 2.6; }
  .so-cap { margin-top: var(--s-3); font-size: 12px; }
  /* the bare screen: no frame, no buttons, no status bar, no composer */
  .so-phone { width: 260px !important; height: 316px !important; padding: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); background: #fff; }
  .so-phone .ps-screen { border-radius: 16px; background: #fff; }
  .so-phone .ps-btn, .so-phone .ig-status, .so-phone .ig-comp, .so-phone .so-ph-add { display: none; }
  .so-phone .kit-ig-dmh { padding-top: 10px; padding-bottom: 8px; }
  @keyframes so-cut { from { opacity: 0; } }

  /* the reel takes off: the comments (beats 0-1, the bill still $39), then the two bills as one panel (2-4) */
  .so-sg-ph, .so-sg-bills { grid-area: 1 / 1; display: block; min-width: 0; }
  .so-sg-ph .so-pl, .so-sg-bills .so-pl, .so-ld { display: none; }
  .so-sg-bills { visibility: hidden; }
  .so-sg-stage:has(> .so-sb.on) .so-sg-bills { visibility: visible; animation: so-cut 0.35s var(--ease); }
  .so-sg-stage:has(> .so-sb.on) .so-sg-ph { visibility: hidden; }
  .so-ph-h { inset: 0 0 auto; padding: 0 12px; }
  .so-ph-h b { font-size: 14px; }
  .so-ph-h .ig-g { width: 20px; height: 20px; }
  .so-ph-cap { inset: 40px 0 auto; padding: 8px 12px; gap: 8px; }
  .so-ph-cap img { width: 26px; height: 26px; }
  .so-ph-cap p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .so-ph-k { inset: 90px 0 auto; padding: 8px 12px 0; }
  .so-sg .so-cms { inset: 116px 0 auto; height: 192px; padding: 0 12px; }
  .so-sg .so-cm { flex: none; height: 48px; padding-block: 0; align-content: center; align-items: center; margin-inline: -12px; padding-inline: 12px; }
  .so-sg .so-cm-l { padding-top: 0; }
  .so-sg-two { height: 316px; grid-template-columns: minmax(0, 1fr); gap: 0; align-content: start; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .so-sg-two .so-bl { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .so-bl-h { gap: 8px; padding-bottom: 0; border-bottom: 0; }
  .so-bl-h > img, .so-bl-mark { width: 24px; height: 24px; border-radius: 7px; }
  .so-bl-mark img { width: 17px; height: 17px; }
  .so-bl-h b { font-size: 14px; }
  .so-bl-h > span:last-child { font-size: 11.5px; }
  .so-mt { gap: 5px; }
  .so-mt-bar { height: 10px; }
  .so-mt-l { min-height: calc(2 * 1.35 * 12px); font-size: 12px; line-height: 1.35; }
  .so-bl-row { font-size: 13.5px; }
  .so-bl-sub { font-size: 11.5px; }
  .so-bl-row.is-x { font-size: 12px; }
  .so-bl-tot { flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; padding-top: 8px; }
  .so-bl-tot b { order: 1; font-size: 26px; line-height: 1.2; }
  .so-bl-tot .so-bl-up { order: 2; position: static; max-width: 100%; }
  .so-bl-tot > span:first-child { display: none; }
  .so-bl-note { display: none; }
  /* ours, folded to one row under ManyChat's: the name and what it is beside the flat $29 */
  .so-bl.is-us { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; margin-top: 12px; padding-top: 12px; border-top: var(--hairline) solid var(--line); }
  .is-us .so-bl-h > span:last-child, .is-us .so-us-p, .is-us .so-bl-row:not(.is-x) { display: none; }
  .is-us .so-bl-row.is-x { grid-column: 1; padding-inline-start: 32px; }
  .is-us .so-bl-tot { grid-column: 2; grid-row: 1 / 3; padding-top: 0; border-top: 0; }
  .is-us .so-bl-tot > span:first-child { display: none; }
  /* Portuguese writes dollars as "US$ 29", 37px wider than "$29": the price sits beside the line under our name instead of beside the name, and
     the "US$ 60 a mais do que com 2.250" pill takes two lines; the 14px come from the air above our row (LF, 2026-10-10) */
  html[lang='pt-BR'] .so-bl-tot .so-bl-up { height: auto; min-height: 22px; max-width: 190px; padding-block: 2px; border-radius: 12px; line-height: 1.2; text-wrap: balance; }
  html[lang='pt-BR'] .so-bl.is-us { margin-top: 5px; padding-top: 6px; }
  html[lang='pt-BR'] .is-us .so-bl-h { grid-column: 1 / -1; }
  html[lang='pt-BR'] .is-us .so-bl-tot { grid-row: 2; align-self: center; }
  html[lang='pt-BR'] .is-us .so-bl-row.is-x { padding-inline-start: 0; }

  /* the one table: the plans on beats 0 and 2, the month worked out on 1, 3 and 4 */
  .so-bt-stage > .so-ot, .so-bt-stage > .so-rc { grid-area: 1 / 1; min-width: 0; }
  .so-bt-stage > .so-rc { visibility: hidden; }
  .so-bt-stage:has(> .so-rb.on) > .so-rc { visibility: visible; animation: so-cut 0.35s var(--ease); }
  .so-bt-stage:has(> .so-rb.on) > .so-ot { visibility: hidden; }
  .so-ot { height: 316px; border-radius: 16px; box-shadow: none; }
  .so-ot-h { height: 44px; align-items: center; padding: 0 12px; }
  .so-ot-h b { font-size: 14px; }
  .so-ot-h span { font-size: 11.5px; }
  .so-ot table { table-layout: fixed; }
  .so-ot thead th, .so-ot thead td { height: 46px; padding: 0 5px; font-size: 11.5px; letter-spacing: 0; line-height: 1.25; vertical-align: middle; }
  .so-ot tbody th, .so-ot tbody td { height: 44px; padding: 0 5px; font-size: 12.5px; vertical-align: middle; }
  .so-ot th[scope="row"], .so-ot thead th:nth-child(2) { padding-inline-start: 8px; }
  .so-ot td:first-child { width: 3px; padding: 0; }
  .so-ot thead th:nth-child(2) { width: 72px; } .so-ot thead th:nth-child(3) { width: 48px; } .so-ot thead th:nth-child(4) { width: 72px; }
  .so-rc { height: 316px; gap: 8px; align-content: start; padding: 12px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .so-rc-c { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 2px 6px; border: 0; border-radius: 0; }
  .so-rc-c > span { font-size: 12px; line-height: 1.35; }
  .so-rc-c b { font-size: 26px; }
  .so-rc-r { gap: 6px; padding: 10px 12px; border-radius: 12px; min-height: 0; }
  .so-rc-k { font-size: 11.5px; }
  .so-rc-l { gap: 5px; }
  .so-rc-l p { font-size: 13px; }
  .so-rc-l p.is-x { font-size: 12px; }
  .so-rc-l p.is-tot { padding-top: 6px; align-items: center; }
  .so-rc-l p.is-tot span:last-child { font-size: 22px; }
  .so-rc-us { gap: 10px; padding: 10px 12px; border-radius: 12px; }
  .so-rc-us .so-bl-mark { width: 26px; height: 26px; }
  .so-rc-us p b { font-size: 13px; }
  .so-rc-us p span { display: none; }
  .so-rc-29 { font-size: 22px; }

  /* every message answered: the customer's phone alone, the rule in the line under it */
  .so-ar-list { display: none; }
  .so-ar-ph { grid-area: 1 / 1; }
  .so-ar-prof { display: none; }
  .so-ar-scr .ig-dm-h { padding-top: 10px; }
  .so-ar-scr .ig-th { flex: 1; justify-content: flex-end; }
  .so-ar-ch { inset: 0 0 auto; padding: 0 12px; }
  .so-ar-ch b { font-size: 14px; }
  .so-ar-ch .ig-g { width: 20px; height: 20px; }
  .so-ar .so-cms.is-ar { inset: 90px 0 0; padding: 0 12px; }
  .so-ar .so-cm { padding: 6px 0; }
  /* the caption carries the offer ("Comenta LINK y recibe 15% de descuento"), so a language that needs a third line gets it; the comments
     start under the caption wherever it ends, and those three languages give the line back from the air between comments (LF, 2026-10-10) */
  .so-ar .so-ar-scr > .so-ph-cap { position: relative; inset: auto; flex: none; margin-top: 40px; }
  .so-ar .so-ar-scr > .so-ph-cap p { -webkit-line-clamp: 3; }
  .so-ar .so-cms.is-ar { position: relative; inset: auto; flex: 1; min-height: 0; }
  html:is([lang='es'], [lang='fr'], [lang='pt-BR']) .so-ar .so-cm { padding-block: 4px; }
  .so-ar .so-cms.is-ar:has(.so-ar-rep.on) > .so-cm:first-child { display: none; }
  .so-ar-ban { top: 8px; }
  .so-ar-story img { width: 56px; height: 96px; }

  .so-grow { grid-template-columns: minmax(0, 1fr); }
  .so-own { grid-template-columns: minmax(0, 1fr); }
  .so-own-c { padding: var(--s-6); }
  .so-plan { padding: var(--s-6); }
}
/* a short phone (320 x 568): the surface 272 tall, the source note left to the page's own source line */
@media (max-width: 860px) and (max-height: 620px) {
  .so-box { padding-top: var(--s-3); }
  .so-sg .so-sg-stage, .so-bt .so-bt-stage, .so-ar .so-ar-stage { grid-template-rows: 272px auto; }
  .so-phone { height: 272px !important; }
  .so-sg-two, .so-ot, .so-rc { height: 272px; }
  .so-sg .so-cms { height: 144px; }
  .so-sg-two { padding: 10px 14px; }
  .so-sg-two .so-bl { gap: 6px; }
  .so-bl.is-us { margin-top: 8px; padding-top: 8px; }
  .is-them .so-bl-row.is-x { display: none; }
  .is-us .so-bl-row.is-x { grid-column: 1 / -1; grid-row: 2; }
  .is-us .so-bl-tot { grid-row: 1; }
  .so-ot-h { height: 36px; }
  .so-ot thead th, .so-ot thead td { height: 44px; }
  .so-ot tbody th, .so-ot tbody td { height: 37px; }
  .so-sg .so-cap, .so-bt .so-cap { display: none; }
  .so-sg .kit-fit, .so-bt .kit-fit, .so-ar .kit-fit { --kit-h: 298px !important; }
  .so-rc-c { display: none; }
  .so-mt-l { min-height: 0; }
  .so-ar-story img { width: 40px; height: 70px; }
  .so-ar .so-cms.is-ar > .so-cm:first-child { display: none; }
  .so-ar .so-cms.is-ar:has(.so-ar-rep.on) > .so-cm:nth-child(2) { display: none; }
  .so-ar-th { padding-bottom: 6px !important; }
}
@media (min-width: 861px) and (max-width: 1080px) { .so-grow { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .so-sg *, .so-bt *, .so-ar *, .so-line-t { animation: none !important; transition: none !important; } }

/* right to left (KIT.md § 6.15, 16): the kit keeps a picture left to right inside its wrappers; the three bill pictures sit
   outside them, so they get the same two lines; the name, the line and the source note under a scene are page text */
[dir='rtl'] .so-grow-v { direction: ltr; }
[dir='rtl'] .so-grow-v :is(p, li, time, small) { unicode-bidi: plaintext; }
[dir='rtl'] :is(.so-line, .so-cap, .so-vcap, .so-pl) { direction: rtl; }

/* phones, round 2 (QA2 P-2; agent S, 2026-10-07): a surface switch is a cross-fade over a solid surface, never through a
   blank stage: the surface that leaves stays in place under the one that arrives until it is fully in (0.3s). */
@media (max-width: 860px) {
  .so-sg-ph, .so-sg-bills, .so-bt-stage > .so-ot, .so-bt-stage > .so-rc { z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; }
  .so-sg-stage:has(> .so-sb.on) .so-sg-bills, .so-sg-stage:not(:has(> .so-sb.on)) .so-sg-ph,
  .so-bt-stage:has(> .so-rb.on) > .so-rc, .so-bt-stage:not(:has(> .so-rb.on)) > .so-ot { transition-delay: 0s; z-index: 2; animation: so-xf 0.3s linear; }
  /* hold, then cut (QA pass 3 L-1 and pass 4; agent F2, 2026-10-08, the same rule as the flow-builder sheets). An opacity
     cross-fade let the leaving surface read through the arriving one for 0.3s (two surfaces on top of each other), and an
     arriving surface that covers at once is an empty box while its own parts fade in. So the leaving surface stays ON
     TOP, whole, for 0.3s while the arriving one draws underneath it, then it is gone in one frame. */
  @keyframes so-xf { from, to { z-index: 1; } }
  /* the loop's restart: no fade to nothing on a phone (the stage was blank for about half a second), and the page's
     script marks the root is-first for the first beat, drawn in the same task that clears the last one. Nothing eases
     in that moment, so the last picture is replaced by the complete first one in one frame. */
  .is-reset .so-sg-stage, .is-reset .so-bt-stage, .is-reset .so-ar-stage { opacity: 1; transition: none; }
  :is(.so-sg, .so-bt, .so-ar).is-first, :is(.so-sg, .so-bt, .so-ar).is-first *, :is(.so-sg, .so-bt, .so-ar).is-first *::before, :is(.so-sg, .so-bt, .so-ar).is-first *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  /* a screen that REPLACES another inside one phone (one chat or story after another) arrives whole: the one it replaces leaves in the same
     frame, so an entrance from nothing was a blank screen for a frame or two */
  .so-ar .ps-phone .so-ar-scr { animation: none !important; }
}

/* ───────────── /facebook-auto-reply (agent FB, 2026-10-08): the Page's post and its Messenger, both answered ─────────────
   The figure is .so-ar.so-fb, so it takes the Instagram scene's beat, phone and restart rules above and adds only its own
   parts: the post as Facebook draws it (so-fp-, so-fc-), the three automations between the two surfaces, the phone's
   screens as Messenger draws them (so-fm-). Facebook's own greys and blues stay inside the two depictions. */
.so-fb { --fbm: #65676b; --fbl: #0064d1; }
@media (min-width: 861px) { .so-fb .so-fb-stage { grid-template-columns: 380px minmax(0, 1fr) 272px; gap: 40px; } .so-fb-post { height: 624px; } }
.so-fb .so-ar-lh b { display: inline-flex; align-items: center; gap: 8px; }
.so-fb .so-ar-lh .i { width: 18px; height: 18px; }
.so-fb-post { align-self: center; min-width: 0; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-card); overflow: hidden; }
.so-fb-post p { margin: 0; }
.so-fb-post svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.so-fp-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.so-fp-h img { width: 38px; height: 38px; flex: none; border-radius: 50%; object-fit: cover; }
.so-fp-h p { display: grid; line-height: 1.25; }
.so-fp-h b { font-size: 14px; font-weight: 650; }
.so-fp-h span { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fbm); }
.so-fp-h .i { width: 12px; height: 12px; }
.so-fp-t { padding: 0 14px 10px; font-size: 13.5px; line-height: 1.4; }
.so-fp-img { display: block; width: 100%; height: 108px; object-fit: cover; }
.so-fp-n { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; font-size: 12.5px; color: var(--fbm); }
.so-fp-n span { display: inline-flex; align-items: center; gap: 6px; }
.so-fp-lk { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: var(--facebook); color: #fff; }
.so-fp-lk svg { width: 11px; height: 11px; stroke-width: 2.2; }
.so-fp-a { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 14px; padding: 3px 0; border-block: 1px solid var(--line-soft); }
.so-fp-a span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; font-size: 13px; font-weight: 600; color: var(--fbm); }
.so-fcs { list-style: none; margin: 0; padding: 10px 14px 14px; display: grid; gap: 8px; }
.so-fc { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
.so-fc > div { min-width: 0; }
.so-fc.on, .so-fc-r.on { animation: so-in 0.4s var(--ease) backwards; }
.so-fc-b { width: fit-content; max-width: 100%; display: grid; padding: 7px 11px; border-radius: 16px; background: var(--fb-bubble); font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.so-fc-b b { font-weight: 650; }
.so-fc-b .so-fc-tag { color: var(--fbl); }
.so-fc-m { display: flex; gap: 12px; padding: 3px 11px 0; font-size: 11.5px; font-weight: 650; color: var(--fbm); }
.so-fc-m time { font-weight: 400; }
.so-fc-r { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 7px; margin-top: 7px; }
.so-fc-r > img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.so-fc-r > div { min-width: 0; }
/* the Page's Messenger */
.so-fm svg { width: 21px; height: 21px; flex: none; fill: none; stroke: var(--facebook); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.so-fm-h { flex: none; display: flex; align-items: center; gap: 9px; padding: 50px 14px 10px; border-bottom: 1px solid var(--line-soft); }
.so-fm-h img { width: 32px; height: 32px; flex: none; border-radius: 50%; object-fit: cover; }
.so-fm-h p { flex: 1; min-width: 0; margin: 0; }
.so-fm-h b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-fm-th { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 12px; overflow: hidden; }
.so-fm-th > * { flex: none; }
.so-fm-intro { display: grid; justify-items: center; gap: 2px; margin-bottom: auto; padding-top: 20px; text-align: center; }
.so-fm-intro img { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; object-fit: cover; }
.so-fm-intro b { font-size: 15px; font-weight: 700; color: var(--ink); }
.so-fm-intro span { font-size: 12px; color: var(--fbm); }
.so-fm-m { display: flex; align-items: flex-end; gap: 6px; }
.so-fm-m.on { animation: so-in 0.4s var(--ease) backwards; }
.so-fm-m.is-late.on { animation-delay: 0.6s; }
.so-fm-m.me { justify-content: flex-end; }
.so-fm-m > img { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; }
.so-fm-m > div { max-width: 82%; display: grid; gap: 3px; }
.so-fm-m p { margin: 0; padding: 8px 12px; border-radius: 18px; background: var(--fb-bubble); font-size: 13px; line-height: 1.35; color: var(--ink); }
.so-fm-m.me p { max-width: 82%; background: var(--facebook); color: #fff; }
.so-fm-m .so-fm-btn { text-align: center; font-weight: 650; color: var(--fbl); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: transform 0.15s var(--ease); }
.so-fm-m .so-fm-btn.tap { transform: scale(0.96); box-shadow: inset 0 0 0 2px var(--facebook); }
.so-fm-c { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px 24px; }
.so-fm-c p { flex: 1; margin: 0; padding: 7px 14px; border-radius: 20px; background: var(--fb-bubble); font-size: 13px; color: var(--fbm); }
/* where the free tools stop: the same card, its rows marked instead of numbered */
.so-fb-stop .so-own-s li > span { color: var(--ink-3); }
.so-fb-stop .so-own-s li > span .i { width: 14px; height: 14px; }
/* a phone: ONE surface at a time, the post while the comment is answered, the Messenger chat otherwise */
@media (max-width: 860px) {
  .so-fb-post, .so-fb-ph { grid-area: 1 / 1; min-width: 0; z-index: 0; transition: visibility 0s linear 0.3s, z-index 0s linear 0.3s; }
  .so-fb-post { align-self: stretch; visibility: hidden; height: 316px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
  .so-fb-stage:has(> .so-fp.on) .so-fb-post { visibility: visible; }
  .so-fb-stage:has(> .so-fp.on) .so-fb-ph { visibility: hidden; }
  .so-fb-stage:has(> .so-fp.on) .so-fb-post, .so-fb-stage:not(:has(> .so-fp.on)) .so-fb-ph { transition-delay: 0s; z-index: 2; animation: so-xf 0.3s linear; }
  .so-fp-img, .so-fp-n { display: none; }
  .so-fp-h { padding: 10px 12px 6px; }
  .so-fp-h img { width: 32px; height: 32px; }
  .so-fp-t { padding: 0 12px 8px; font-size: 12.5px; }
  .so-fp-a { margin: 0 12px; }
  .so-fp-a span { height: 26px; font-size: 12px; }
  .so-fcs { padding: 8px 12px; gap: 6px; }
  .so-fcs > :is(.is-o1, .is-o2), .so-fcs:has(.so-fc-r.on) > .is-old { display: none; }
  .so-fm-h { padding: 8px 12px; }
  .so-fm-c, .so-fm-intro { display: none; }
  .so-fm-th { padding: 8px 10px; }
}
@media (max-width: 860px) and (max-height: 620px) {
  .so-fb-post { height: 272px; }
  .so-fp-a { display: none; }
  .so-fcs > .is-old, .so-fc-r .so-fc-m { display: none; }
  .so-fm-th:has(.so-fm-m.is-late.on) > .so-fm-m:nth-child(2) { display: none; }   /* the code has arrived: the private reply above it has scrolled off */
}