/* v3-smm — social media management detail page (lane smm, site round 3, 25 Sep 2026; review fixes same evening; review r4 26 Sep). Brand-book palette only; loads after v2.css + v2-cases.css.
   Fonts: Clash Display (--disp) + Gully (--text) everywhere; the device UI stack (--ui) only inside the Instagram / Facebook / story replicas. */
.sm .ico{display:grid;place-items:center;font:700 13px/1 var(--mono)}
.sm .i-k{background:rgba(13,13,13,.08);color:var(--black)}
.sm .ico svg{width:22px;height:22px}
.sm .sm-src{margin:22px 0 0;font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);max-width:78ch}
.sm .sm-src.d{color:var(--mute)}

/* ---------- hero ---------- */
.sm-hero{padding-bottom:clamp(40px,5vw,72px)}
.sm-hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"t v" "b v";column-gap:clamp(28px,4vw,64px);row-gap:0}
.sm-hero-t{grid-area:t;align-self:end}
.sm-hero-b{grid-area:b;align-self:start}
.sm-hv{grid-area:v;align-self:center}
.sm-hero h1{margin:18px 0 18px;font:600 clamp(38px,4.8vw,68px)/1.02 var(--disp);letter-spacing:-.012em}
.sm-del{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.sm-del li{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh1);font-size:15px;color:var(--ink2)}
.sm-del li .ico{flex:0 0 38px;height:38px;border-radius:6px}
.sm-del li .ico svg{width:20px;height:20px}
.sm-del li b{display:block;font:600 21px/1 var(--disp);color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.sm-del li.m{border:0;background:none;box-shadow:none;padding:0 4px;font:600 13px/1.25 var(--mono);color:var(--mute);text-transform:none;letter-spacing:0}
.sm-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sm-cta .btn{margin:0}
.sm-nums{display:flex;flex-wrap:wrap;gap:10px 28px;margin:28px 0 0;padding:0;list-style:none}
.sm-nums li{display:flex;align-items:baseline;gap:8px}
.sm-nums b{font:600 24px/1 var(--disp);letter-spacing:-.01em;color:var(--teal)}
.sm-nums span{font-size:15px;color:var(--mute)}

.sm-hv{position:relative;display:flex;justify-content:center;padding:28px 0 36px;min-width:0}
.sm-hv::before{content:"";position:absolute;inset:0 4% 0 4%;border-radius:6px;background:var(--tealT);border:1px solid var(--tealM)}
.sm-hv::after{content:"";position:absolute;width:150px;height:150px;right:6%;top:-18px;border-radius:50%;background:var(--yellow);z-index:0}
.sm-ph{position:relative;z-index:1;width:min(340px,100%);border-radius:44px;background:var(--black);padding:10px;box-shadow:var(--sh3)}
.sm-ig{background:#fff;border-radius:35px;overflow:hidden;font-family:var(--ui);color:var(--black)}
.sm-ig-bar{display:flex;justify-content:space-between;align-items:center;padding:18px 18px 8px}
.sm-ig-bar .h{font:700 17px/1 var(--ui)}
.sm-ig-bar .i{display:flex;gap:14px}
.sm-ig-bar svg{width:22px;height:22px}
.sm-ig-pro{display:flex;align-items:center;gap:14px;padding:8px 16px 6px}
.sm-ring{flex:0 0 auto;width:80px;height:80px;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--yellow),var(--gold),var(--rust),var(--teal),var(--yellow))}
.sm-ring img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid #fff;background:#fff}
.sm-ring-s{width:54px;height:54px;padding:2px}
.sm-ring-s img{border-width:2px}
.sm-ig-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.sm-ig-nm{margin:0;font:600 13.5px/1.3 var(--ui)}
.sm-ig-btn{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sm-ig-btn span{display:grid;place-items:center;height:30px;border-radius:8px;background:var(--grey);font:600 13px/1 var(--ui)}
.sm-ig-btn .f{background:var(--teal);color:#fff}
.sm-ig-hl{display:flex;gap:12px;padding:12px 16px 10px}
.sm-ig-hl .h{display:flex;flex-direction:column;align-items:center;gap:5px;font:500 11px/1 var(--ui);color:var(--black)}
.sm-ig-hl em{font-style:normal}
.sm-ig-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sm-ig-tabs span{display:grid;place-items:center;height:40px;color:#9a9a9a}
.sm-ig-tabs span.on{color:var(--black);box-shadow:inset 0 -2px 0 var(--black)}
.sm-ig-tabs svg{width:21px;height:21px}
.sm-ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.sm-ig-grid .t{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--grey)}
.sm-ig-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-ig-grid .k{position:absolute;top:6px;right:6px;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.sm-ig-grid .k svg{width:16px;height:16px}

.sm-fl{position:absolute;z-index:2;margin:0;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh3);color:var(--ink);text-decoration:none;font-family:var(--text);max-width:270px;transition:transform .2s ease}
a.sm-fl:hover{transform:none}
.sm-fl>img{flex:0 0 auto;width:62px;height:84px;object-fit:cover;border-radius:6px}
.sm-fl>span:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.sm-fl small{display:flex;align-items:center;gap:6px;white-space:nowrap;font:600 13px/1.2 var(--text);color:var(--slate)}
.sm-fl small .av{width:20px;height:20px;border-radius:50%}
.sm-fl small svg{width:13px;height:13px}
.sm-fl b{display:flex;align-items:center;gap:6px;font:700 24px/1 var(--disp);letter-spacing:-.01em}
.sm-fl b svg{width:20px;height:20px;color:var(--rust)}
.sm-fl em{display:flex;align-items:center;gap:5px;font:500 13px/1 var(--text);font-style:normal;color:var(--slate)}
.sm-fl em svg{width:14px;height:14px}
.sm-fl-r{left:0;top:50%}
.sm-fl-f{right:0;bottom:7%}
.sm-fl-f b{font:600 17px/1.2 var(--disp);letter-spacing:0}
.sm-fl .fbg{position:absolute;top:-10px;left:-10px;width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;box-shadow:var(--sh2)}
.sm-fl .fbg svg{width:16px;height:16px;fill:currentColor}
.sm-ext{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;min-height:40px;padding:0 14px;border-radius:5px;background:var(--tealT);color:var(--teal);font:600 14.5px/1 var(--text)}
.sm-ext svg{width:16px;height:16px;flex:0 0 auto}

/* ---------- numbers band ---------- */
.sm-num-g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px}
.sm-top{display:grid;grid-template-columns:160px minmax(0,1fr);gap:24px;align-items:center;padding:18px;background:#fff;color:var(--ink);border-radius:6px;text-decoration:none;box-shadow:0 0 0 1px rgba(13,13,13,.08);transition:transform .2s ease}
a.sm-top:hover{transform:none}
.sm-top .im{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#111}
.sm-top .im>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-top .tx{display:flex;flex-direction:column;gap:12px;min-width:0}
.sm-top small{display:flex;align-items:center;gap:8px;white-space:nowrap;font:600 14px/1 var(--text);color:var(--slate)}
.sm-top small img{width:26px;height:26px;border-radius:50%}
.sm-top .k{font:600 13px/1 var(--mono);font-style:normal;text-transform:none;letter-spacing:0;color:var(--rust)}
.sm-top .tx>b{font:600 19px/1.35 var(--text)}
.sm-top .st{display:flex;align-items:baseline;gap:10px}
.sm-top .st strong{display:flex;align-items:center;gap:10px;font:600 clamp(44px,4.4vw,62px)/1 var(--disp);letter-spacing:-.012em}
.sm-top .st strong svg{width:34px;height:34px;color:var(--rust)}
.sm-top .st span{font-size:17px;color:var(--slate)}
.sm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.18);border-radius:6px;overflow:hidden;border:1px solid rgba(255,255,255,.18)}
.sm-stats>div{background:var(--teal3);padding:clamp(20px,2.4vw,32px)}
.sm-stats>div.w{grid-column:1/-1}
.sm-stats b{display:block;font:600 clamp(40px,4.6vw,64px)/1 var(--disp);letter-spacing:-.012em;color:var(--yellow)}
.sm-stats span{display:block;margin-top:10px;font:600 17px/1.3 var(--text);color:#fff}
.sm-stats small{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.7)}

/* ---------- what's included ---------- */
.sm-inc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sm-c{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh1);color:var(--ink);text-decoration:none;min-height:210px;transition:transform .2s ease,box-shadow .2s ease}
a.sm-c:hover{transform:none;box-shadow:var(--sh2)}
.sm-c.w2{grid-column:span 2}
.sm-c .ico{width:46px;height:46px;flex:0 0 46px;border-radius:6px}
.sm-c h3{font:600 22px/1.2 var(--disp);letter-spacing:-.01em;margin:10px 0 0}
.sm-c p{margin:0;color:var(--ink2);font-size:16px;line-height:1.5;max-width:44ch}
.sm-c .go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--teal)}
.sm-c .go svg{width:17px;height:17px}
.sm-c.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.sm-c.teal p{color:rgba(255,255,255,.85)}
.sm-c.teal .go{color:var(--yellow)}
.sm-c.yel{background:var(--yellow);border-color:var(--yellow)}
.sm-c.yel p{color:var(--ink)}
.sm-mini{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:12px;max-width:420px}
.sm-mini i{height:34px;border-radius:8px;background:rgba(255,255,255,.12);position:relative}
.sm-mini i.r{background:var(--yellow)}
.sm-mini i.p{background:#fff}
.sm-mini i.s::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;border:2px solid var(--yellow)}
.sm-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sm-pills span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.7);border-radius:5px;padding:6px 10px;font:600 13px/1 var(--text)}
.sm-pills i,.sm-leg i,.sm-det .p i,.sm-day .t i{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(13,13,13,.14)}

/* ---------- calendar ---------- */
.sm-cal{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.sm-month{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh2);padding:18px;min-width:0}
.sm-month-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.sm-month-h>b{font:600 20px/1 var(--disp)}
.sm-chips{display:flex;flex-wrap:wrap;gap:8px}
.sm-chips button{min-height:44px;padding:0 14px;border-radius:6px;border:1px solid var(--line);background:#fff;font:500 14.5px/1 var(--text);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.sm-chips button small{font:600 12px/1 var(--mono);color:var(--mute)}
.sm-chips button[aria-pressed="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.sm-chips button[aria-pressed="true"] small{color:rgba(255,255,255,.75)}
.sm-dow,.sm-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.sm-dow span{font:600 12px/1 var(--mono);color:var(--mute);text-align:center;padding:4px 0 8px;text-transform:none;letter-spacing:0}
.sm-day{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0;min-height:108px;padding:6px;border:1px solid var(--line2);border-radius:6px;background:#FAFAFA;font:inherit;color:inherit;text-align:left}
.sm-day.e{background:none;border-color:transparent}
.sm-day .n{font:600 12px/1 var(--mono);color:var(--mute)}
button.sm-day{cursor:pointer;background:#fff;border-color:var(--line);transition:transform .15s ease,opacity .2s ease,box-shadow .15s ease}
button.sm-day:hover{transform:none;box-shadow:var(--sh2)}
button.sm-day[aria-pressed="true"]{border-color:var(--teal);box-shadow:0 0 0 2px var(--teal)}
.sm-day .th{display:block;height:60px;border-radius:8px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sm-day .th img{display:block;width:100%;height:100%;object-fit:cover}
.sm-day .th.p45 img,.sm-day .th.p11 img{object-fit:contain}
.sm-day .rg{display:block;width:52px;height:52px;margin:4px auto;border-radius:50%;padding:2.5px;background:conic-gradient(from 200deg,var(--yellow),var(--gold),var(--rust),var(--teal),var(--yellow))}
.sm-day .rg img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;border:2px solid #fff;background:#fff}
.sm-day .t{display:flex;align-items:center;gap:5px;font:600 12px/1.1 var(--text);color:var(--ink2);white-space:nowrap;overflow:hidden}
.sm-month[data-f="reel"] button.sm-day:not(.k-reel),.sm-month[data-f="post"] button.sm-day:not(.k-post),.sm-month[data-f="story"] button.sm-day:not(.k-story){opacity:.22}
.sm-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.sm-det{display:grid;grid-template-columns:148px minmax(0,1fr);gap:14px;background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh2);padding:12px}
.sm-det .im{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:var(--grey)}
.sm-det .im>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-det .im.p45{aspect-ratio:4/5;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sm-det .im.p11{aspect-ratio:1/1;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sm-det .im.p45>img,.sm-det .im.p11>img{object-fit:contain}
.sm-det .im .sm-s{position:absolute;inset:0;border-radius:0;box-shadow:none;aspect-ratio:auto}
.sm-key{display:none}
.sm-det .tx{display:flex;flex-direction:column;gap:8px;padding-top:4px;min-width:0}
.sm-det p{margin:0}
.sm-det .k{font:600 12.5px/1 var(--mono);text-transform:none;letter-spacing:0;color:var(--rust)}
.sm-det .c{font:600 16px/1.35 var(--text);color:var(--ink)}
.sm-det .p{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink2)}
.sm-det .s{font-size:13px;color:var(--mute)}
.sm-leg{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.sm-leg h3{font:600 16px/1.2 var(--disp);margin:0 0 10px}
.sm-leg ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.sm-leg li{display:flex;align-items:center;gap:8px;font-size:14.5px}
.sm-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sm-notes li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.4;color:var(--ink2)}
.sm-notes svg,.sm-chk svg,.sm-rep svg{flex:0 0 22px;width:22px;height:22px;padding:4px;border-radius:50%;background:var(--teal);color:#fff;margin-top:1px}

/* ---------- reels + stories ---------- */
.sm-rl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.sm-r{position:relative;display:block;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#111;border:0;padding:0;margin:0;cursor:pointer;color:#fff;text-decoration:none;font:inherit;text-align:left;box-shadow:var(--sh2);transition:transform .22s ease}
.sm-r:hover{transform:none}
.sm-r[hidden]{display:none}
.sm-r.top{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.sm-r>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-r::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 58%,rgba(0,0,0,.72) 100%)}
.sm-r .who{position:absolute;z-index:1;top:10px;left:10px;right:10px;display:flex;align-items:center;gap:6px;font:600 12.5px/1.1 var(--text);min-width:0}
.sm-r .who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-r .who img{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1.5px solid #fff}
.sm-r .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(13,13,13,.55);color:#fff;display:grid;place-items:center;z-index:1;opacity:.92}
.sm-r .pl svg{width:22px;height:22px;margin-left:3px}
.sm-r .sm-ext{position:absolute;z-index:1;left:10px;bottom:10px;min-height:32px;padding:0 10px;font-size:13px;background:#fff}
.sm-r .cp{position:absolute;z-index:1;left:16px;right:16px;bottom:18px;font:600 clamp(16px,1.4vw,19px)/1.35 var(--text)}
.sm-r.top .who{top:14px;left:14px;font-size:14px}
.sm-r.top .pl{width:66px;height:66px}

.sm-sto{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:clamp(48px,6vw,80px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.sm-h3{font-size:clamp(26px,2.6vw,34px)}
.sm-p{margin:10px 0 0;color:var(--ink2);font-size:17px}
.sm-pts{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.sm-pts li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:var(--ink2)}
.sm-pts .ico{flex:0 0 40px;width:40px;height:40px;border-radius:6px}
.sm-pts .ico svg{width:20px;height:20px}
.sm-pts b{display:block;color:var(--ink);font:600 17px/1.3 var(--text)}
.sm-sf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.sm-s{position:relative;margin:0;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#111;box-shadow:var(--sh2);font-family:var(--ui)}
.sm-s>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-s::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 24%)}
.sm-s .bars{position:absolute;z-index:1;top:8px;left:8px;right:8px;display:flex;gap:3px}
.sm-s .bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.sm-s .bars i.on{background:#fff}
.sm-s .who{position:absolute;z-index:1;top:18px;left:10px;display:flex;align-items:center;gap:6px;color:#fff;font:600 12px/1 var(--ui);background:rgba(13,13,13,.66);padding:3px 9px 3px 3px;border-radius:5px}
.sm-s .who img{width:22px;height:22px;border-radius:50%}
.sm-s .sk{position:absolute;z-index:1;left:10%;right:10%;bottom:8%;display:flex;flex-direction:column;gap:6px;background:#fff;color:var(--black);border-radius:6px;padding:12px;text-align:center;box-shadow:0 0 0 1px rgba(13,13,13,.08)}
.sm-s .sk b{font:700 14px/1.2 var(--ui)}
.sm-s .sk.q b{background:var(--gold);color:var(--black);margin:-12px -12px 0;padding:10px;border-radius:6px 6px 0 0}
.sm-s .sk.q span{font-size:12.5px;color:var(--slate);padding:6px 0 0}
.sm-s .sk.poll span{display:block;border:1px solid var(--line);border-radius:6px;padding:8px;font:600 13px/1 var(--ui)}
.sm-s .sk.ln{flex-direction:row;justify-content:center;align-items:center;gap:6px;left:18%;right:18%;padding:10px;border-radius:6px;font:700 13px/1 var(--ui);color:var(--teal);text-transform:none;letter-spacing:0}
.sm-s .sk.ln svg{width:16px;height:16px}
.sm-s .sk.hi{top:19%;bottom:auto}
.sm-sf .sm-s .sk{bottom:17%}
.sm-s .sk.cl{bottom:9%;left:10px;right:auto;flex-direction:row;align-items:center;gap:7px;padding:8px 11px;border-radius:5px;font:700 12.5px/1 var(--ui)}
.sm-s .sk.cl::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--rust)}
.sm-s-d .who{top:15px;left:6px;padding:2px 8px 2px 2px}
.sm-s-d .who img{width:16px;height:16px}
.sm-s-d .sk{left:7%;right:7%;padding:7px;border-radius:6px;gap:4px}
.sm-s-d .sk b{font-size:12px}
.sm-s-d .sk.q b{margin:-7px -7px 0;padding:6px;border-radius:6px 6px 0 0}
.sm-s-d .sk.q span,.sm-s-d .sk.poll span{font-size:12px;padding:4px}
.sm-s-d .sk.ln{left:8%;right:8%;font-size:12px;padding:7px 4px}
.sm-s-d .sk.ln svg{width:12px;height:12px}
.sm-s-d .sk.cl{left:7px;right:auto;padding:6px 8px;font-size:12px}
.sm-s figcaption{position:absolute;z-index:1;left:10px;bottom:10px;background:var(--yellow);color:var(--black);font:600 12.5px/1 var(--text);padding:6px 9px;border-radius:8px}

/* ---------- facebook ---------- */
.sm-fb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.sm-fbp{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh3);overflow:hidden;font-family:var(--ui);color:var(--black);max-width:520px;width:100%;justify-self:center}
.sm-fbp .cov{height:112px;background:var(--teal);display:flex;align-items:center;justify-content:flex-end;padding:0 22px}
.sm-fbp .cov img{height:52px;width:auto}
.sm-fbp .id{position:relative;display:flex;align-items:center;min-height:62px;padding:8px 18px 4px 118px}
.sm-fbp .id .av{position:absolute;left:18px;top:-44px;width:88px;height:88px;border-radius:50%;border:4px solid #fff;background:#fff}
.sm-fbp .id span{display:flex;flex-direction:column}
.sm-fbp b{font:700 17px/1.2 var(--ui)}
.sm-fbp small{font-size:13px;color:var(--slate);display:inline-flex;align-items:center;gap:4px}
.sm-fbp small svg{width:12px;height:12px}
.sm-fbp .tabs{display:flex;gap:20px;padding:10px 18px 0;border-bottom:1px solid var(--line);font:600 14px/1 var(--ui);color:var(--slate)}
.sm-fbp .tabs span{padding:10px 0}
.sm-fbp .tabs .on{color:var(--teal);box-shadow:inset 0 -3px 0 var(--teal)}
.sm-fbp .post{padding:14px 18px 6px;border-bottom:8px solid var(--grey)}
.sm-fbp .ph{display:flex;gap:10px;align-items:center}
.sm-fbp .ph .av{width:40px;height:40px;border-radius:50%}
.sm-fbp .ph span{display:flex;flex-direction:column}
.sm-fbp .ph .x{margin-left:auto;flex-direction:row;align-items:center;gap:5px;font:600 12.5px/1 var(--ui);color:var(--teal);background:var(--tealT);padding:7px 10px;border-radius:5px;white-space:nowrap}
.sm-fbp .ph .x svg{width:14px;height:14px}
.sm-fbp .post p{margin:10px 0;font-size:15px;line-height:1.45}
.sm-fbp .m{position:relative;margin:0 -18px;aspect-ratio:4/3;overflow:hidden;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sm-fbp .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.sm-fbp .rs .pl{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(13,13,13,.55);color:#fff;display:grid;place-items:center;z-index:1}
.sm-fbp .rs .pl svg{width:17px;height:17px;margin-left:2px}
.sm-fbp .ac{display:grid;grid-template-columns:repeat(3,1fr);padding:12px 0;font:600 14px/1 var(--ui);color:var(--slate)}
.sm-fbp .ac span{display:flex;align-items:center;justify-content:center;gap:6px}
.sm-fbp .ac svg{width:18px;height:18px}
.sm-fbp .rs{padding:14px 18px 18px}
.sm-fbp .rs>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.sm-fbp .rs .v{position:relative;display:block;margin:0;aspect-ratio:9/13;border-radius:6px;overflow:hidden;background:#111;color:#fff;text-decoration:none;transition:transform .2s ease}
.sm-fbp .rs .v:hover{transform:none}
.sm-fbp .rs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-fbp .rs .d{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:5px;padding:22px 8px 8px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff;font:600 13px/1 var(--ui)}
.sm-fbp .rs .d svg{width:13px;height:13px;flex:0 0 auto}
.sm-fb .lead{margin-top:16px}
.sm-chk{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.sm-chk li{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--ink2)}
.sm-chk b{color:var(--ink)}
.sm-fb .sm-fbcta{margin:26px 0 0;width:auto}

/* ---------- insights ---------- */
.sm-ins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sm-ip{background:#fff;border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh2);padding:clamp(16px,2vw,24px);min-width:0;font-family:var(--text)}
.sm-ip-h{display:flex;align-items:center;gap:10px}
.sm-ip-h img{width:40px;height:40px;border-radius:50%}
.sm-ip-h span:not(.pill){display:flex;flex-direction:column;min-width:0}
.sm-ip-h b{font:600 17px/1.2 var(--disp);letter-spacing:-.005em}
.sm-ip-h small{font-size:13px;color:var(--slate)}
.sm-ip-h .pill{margin-left:auto;background:var(--tealT);color:var(--teal);font:600 12px/1 var(--text);padding:7px 10px;border-radius:5px}
.sm-ip-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 8px}
.sm-ip-k div{background:var(--grey);border-radius:6px;padding:10px 12px;min-width:0}
.sm-ip-k small{display:block;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-ip-k b{display:block;margin-top:4px;font:600 22px/1.1 var(--disp);letter-spacing:-.01em}
.sm-bars{position:relative;display:flex;align-items:flex-end;gap:5px;height:200px;padding-top:40px;border-bottom:1px solid var(--line)}
.sm-bars i{position:relative;flex:1;min-width:0;height:var(--h);border-radius:6px 6px 2px 2px;background:var(--teal);transform-origin:bottom;transform:scaleY(.02);transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.rv.in .sm-bars i{transform:none}
.sm-bars i.st{background:var(--gold)}
.sm-bars i.top{background:var(--rust)}
.sm-bars i b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:4px;font:600 12px/1 var(--text);font-variant-numeric:tabular-nums;color:var(--ink2);white-space:nowrap}
.sm-bars i b.tv{left:0;transform:none;display:flex;align-items:baseline;gap:5px;margin-bottom:6px;font:600 24px/1 var(--disp);letter-spacing:-.01em;color:var(--rust)}
.sm-bars i b.tv small{font:600 13px/1 var(--text);color:var(--rust)}
.sm-bars.brk i.top::after{content:"";position:absolute;left:-4px;right:-4px;top:24%;height:8px;background:#fff;transform:skewY(-20deg)}
.sm-ax{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px;color:var(--slate)}
.sm-ax .lg{display:flex;align-items:center;gap:6px}
.sm-ax .lg i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--teal)}
.sm-ax .lg i.st{background:var(--gold);margin-left:6px}
.sm-ins-t{margin:14px 0 0;font-family:var(--text);font-size:15.5px;line-height:1.5;color:var(--ink2)}
.sm-ins-t b{color:var(--ink)}
.sm-rep{margin-top:20px;display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,2fr);gap:16px 24px;align-items:center;background:var(--yellow);border-radius:6px;padding:clamp(20px,2.4vw,28px)}
.sm-rep h3{margin:0;font-size:22px}
.sm-rep ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.sm-rep li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.4;color:var(--ink)}
.sm-rep svg{background:var(--black)}

/* ---------- process ---------- */
.sm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.sm-steps li{position:relative;padding:22px 18px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16)}
.sm-steps li:nth-child(3){background:var(--yellow);border-color:var(--yellow)}
.sm-steps li:nth-child(3) h3,.sm-steps li:nth-child(3) p,.sm-steps li:nth-child(3) b{color:var(--black)}
.sm-steps b{font:600 13px/1 var(--mono);color:var(--yellow)}
.sm-steps h3{font:600 20px/1.2 var(--disp);color:#fff;margin:14px 0 8px}
.sm-steps p{margin:0;color:rgba(255,255,255,.82);font-size:15px;line-height:1.5}

/* ---------- studio ---------- */
.sm-wall{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:0}
@media (max-width:1020px){.sm-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.sm-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- related ---------- */
.sm-rel{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.sm-rel a{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--sh1);transition:transform .2s ease}
.sm-rel a:hover{transform:none}
.sm-rel .ico{width:40px;height:40px;flex:0 0 40px;border-radius:6px}
.sm-rel h3{font:600 18px/1.25 var(--disp);margin:6px 0 0}
.sm-rel p{margin:0;font-size:15px;color:var(--ink2)}

/* ---------- mid-page CTA (review r4) ---------- */
.sm-mcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-top:clamp(24px,3vw,36px);padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,28px);border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh1)}
.sm-mcta p{margin:0;font:600 clamp(19px,1.8vw,24px)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.sm-mcta .btn{margin:0;width:auto}
.sm-mcta.dk{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18);box-shadow:none}
.sm-mcta.dk p{color:#fff}
.sm-mcta.dk .btn-p{background:var(--yellow);color:var(--black);border-color:var(--yellow);box-shadow:none}
.sm-mcta.dk .btn-p:hover{background:#ffdc6e}

/* ---------- reel popup on this page (review r4): fits the screen, scrolls if it cannot, handle label off the native controls ----------
   (the same .lb fix is proposed for the shared v2.css; these rules only load on this page) */
.lb{overflow-y:auto;overscroll-behavior:contain;align-items:safe center}
.lb .phone{width:min(340px,78vw,calc((100vh - 60px)*9/19.2));width:min(340px,78vw,calc((100dvh - 60px)*9/19.2))}
.lb .reel{justify-content:flex-start;padding-top:34px;pointer-events:none}
.lb .reel .sp{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;color:inherit;font-size:12px}
.lb .reel .av.im{padding:0;overflow:hidden;background:#fff}
.lb .reel .av.im img{width:100%;height:100%;object-fit:cover;border-radius:50%}
@media (max-width:760px){
  .lb{padding:72px 16px 20px}
  .lb .phone{width:min(340px,78vw,calc((100vh - 214px)*9/19.2));width:min(340px,78vw,calc((100dvh - 214px)*9/19.2))}
  .lb-side h3{font-size:22px;margin:0 0 6px}
  .lb-side p{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .sm-rl{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sm-rel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm-rep ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1020px){
  .sm-hero-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "v" "b";row-gap:28px}
  .sm-hero-t,.sm-hero-b{align-self:auto}
  .sm-num-g,.sm-fb,.sm-sto{grid-template-columns:minmax(0,1fr)}
  .sm-cal{grid-template-columns:minmax(0,1fr)}
  .sm-side{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}
  .sm-side .sm-notes{grid-column:1/-1}
  .sm-ins{grid-template-columns:minmax(0,1fr)}
  .sm-inc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-rep{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .sm-hero-g{row-gap:22px}
  .sm-hero h1{font-size:36px;margin:14px 0 14px}
  .sm-hv{padding:18px 10px 0;border-radius:6px}
  .sm-hv::before{inset:0;border-radius:6px}
  .sm-hv::after{width:84px;height:84px;right:4%;top:-12px}
  .sm-ph{width:min(320px,100%);max-height:500px;overflow:hidden;border-radius:40px 40px 0 0;padding-bottom:0;-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 98%);mask-image:linear-gradient(180deg,#000 72%,transparent 98%)}
  .sm-ig{border-radius:31px 31px 0 0}
  .sm-fl-f{display:none}
  .sm-fl-r{left:50%;top:auto;bottom:14px;transform:translateX(-50%);width:min(300px,calc(100% - 28px));max-width:none}
  a.sm-fl-r:hover{transform:translateX(-50%)}
  .sm-del li.m{display:none}
  .sm-top{grid-template-columns:112px minmax(0,1fr);gap:16px;padding:14px;border-radius:6px}
  .sm-top .tx{gap:9px}
  .sm-top .tx>b{font-size:16px}
  .sm-top .st strong{font-size:38px;gap:7px}
  .sm-top .st strong svg{width:26px;height:26px}
  .sm-top .st span{font-size:15px}
  .sm-top small{font-size:13px}
  .sm-ext{min-height:36px;padding:0 12px;font-size:14px}
  .sm-stats b{font-size:40px}
  .sm-stats span{font-size:15.5px}
  .sm-inc{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sm-c.w2{grid-column:auto}
  .sm-c.teal,.sm-c.yel{grid-column:1/-1}
  .sm-c{min-height:0;padding:16px;gap:6px;border-radius:6px}
  .sm-c .ico{width:40px;height:40px;flex-basis:40px}
  .sm-c h3{font-size:18px;margin-top:6px}
  .sm-c p{font-size:15px}
  .sm-c .go{font-size:15px}
  .sm-month{padding:12px}
  .sm-month-h>b{width:100%}
  .sm-chips button{padding:0 12px;font-size:15px}
  .sm-dow,.sm-days{gap:4px}
  .sm-dow span{font-size:11px;letter-spacing:0}
  .sm-day{min-height:58px;padding:5px 4px;border-radius:6px;gap:0}
  .sm-day .th,.sm-day .rg,.sm-day .t{display:none}
  .sm-day .n{font-size:13px}
  button.sm-day::after{content:"";position:absolute;left:50%;bottom:7px;width:10px;height:18px;margin-left:-5px;border-radius:3px;background:var(--pc);box-shadow:0 0 0 1px rgba(13,13,13,.28)}
  button.sm-day.k-post::after{width:15px;height:15px;margin-left:-7.5px;border-radius:3px}
  button.sm-day.k-story::after{width:17px;height:17px;margin-left:-8.5px;border-radius:50%;background:none;border:4px solid var(--pc);box-sizing:border-box;box-shadow:0 0 0 1px rgba(13,13,13,.28),inset 0 0 0 1px rgba(13,13,13,.28)}
  .sm-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 12px;padding:10px 12px;border-radius:6px;background:var(--grey);font-size:14px;color:var(--ink2)}
  .sm-key span{display:inline-flex;align-items:center;gap:7px}
  .sm-key i{display:inline-block;background:var(--black);border-radius:3px}
  .sm-key i.kr{width:9px;height:16px}
  .sm-key i.kp{width:13px;height:13px}
  .sm-key i.ks{width:15px;height:15px;border-radius:50%;background:none;border:3.5px solid var(--black);box-sizing:border-box}
  .sm-key em{margin-left:auto;font-style:normal;color:var(--mute)}
  .sm-side{display:flex;align-items:stretch}
  .sm-det{grid-template-columns:124px minmax(0,1fr)}
  .sm-rl{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sm-r{border-radius:6px}
  .sm-r.top{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  .sm-r .pl{width:40px;height:40px}
  .sm-r .pl svg{width:18px;height:18px;margin-left:2px}
  .sm-r.top .pl{width:52px;height:52px}
  .sm-r .who{top:8px;left:8px}
  .sm-r .who img{width:22px;height:22px}
  .sm-r .cp{left:12px;right:12px;bottom:12px;font-size:15px}
  .sm-r .who span{display:none}
  .sm-r.top .who span{display:inline}
  .sm-sf{gap:8px}
  .sm-s{border-radius:6px}
  .sm-s .who{display:none}
  .sm-s .sk{left:6%;right:6%;padding:8px;border-radius:6px}
  .sm-s .sk b{font-size:12px}
  .sm-s .sk.q b{margin:-8px -8px 0;padding:7px;border-radius:6px 6px 0 0}
  .sm-s .sk.q span,.sm-s .sk.poll span{font-size:12px;padding:5px}
  .sm-s .sk.ln{left:8%;right:8%;font-size:12px;padding:8px 4px}
  .sm-s figcaption{font-size:12px;left:6px;bottom:6px;padding:5px 6px}
  .sm-fbp .cov{height:88px}
  .sm-fbp .cov img{height:40px}
  .sm-fbp .id{padding-left:100px}
  .sm-fbp .id .av{width:72px;height:72px;top:-36px}
  .sm-fbp .ph .x{padding:6px 8px;font-size:12px}
  .sm-ip-k div{padding:9px 10px}
  .sm-ip-k b{font-size:20px}
  .sm-bars{gap:3px;height:184px}
  .sm-bars i b.tv{font-size:21px}
  .sm-bars:not(.brk){gap:2px}
  .sm-bars i b{letter-spacing:-.012em}
  .sm-fb .sm-fbcta{width:100%}
  .sm-rep ul{grid-template-columns:minmax(0,1fr)}
  .sm-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sm-steps li{padding:16px 14px}
  .sm-steps h3{font-size:18px;margin:10px 0 6px}
  .sm-rel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sm-rel a{padding:16px}
  .sm-rel a:last-child:nth-child(odd){grid-column:1/-1}
  .sm .cases>.cc:nth-child(n+3){display:none}
  .sm-wall>.tile:nth-child(n+5){display:none}
  .sm-leg ul{grid-template-columns:1fr 1fr}
  .sm-mcta{flex-direction:column;align-items:stretch;text-align:left}
  .sm-mcta .btn{width:100%}
}

/* ---------- round 4 (sweep lane, 26 Sep 2026) ---------- */
/* the real Monastic Media mark (mm-mark-128.png, 2:1) sits whole inside every round avatar, never cropped */
.sm img[src$="mm-mark-128.png"],.lb img[src$="mm-mark-128.png"]{object-fit:contain;background:#fff;box-sizing:border-box}
.sm-ring img[src$="mm-mark-128.png"]{padding:14px 10px}
.sm-r .who img[src$="mm-mark-128.png"],.sm-s .who img[src$="mm-mark-128.png"]{padding:4px 3px}
.sm-s-d .who img[src$="mm-mark-128.png"]{padding:3px 2px}
.sm-fbp .id .av[src$="mm-mark-128.png"]{padding:18px 14px}
.sm-fbp .ph .av[src$="mm-mark-128.png"],.sm-ip-h img[src$="mm-mark-128.png"]{padding:8px 6px}
.lb .reel .av.im img[src$="mm-mark-128.png"]{object-fit:contain;padding:5px 4px}
/* reels: one reel per person leaves four (the breakout reel + three): an even shelf on desktop and tablet, one big + three on a phone */
.sm-rl{grid-template-columns:repeat(4,minmax(0,1fr))}
.sm-rl .sm-r.top{grid-column:auto;grid-row:auto;aspect-ratio:9/16}
@media (max-width:1180px){
  .sm-rl{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .sm-rl .sm-r.top{grid-column:auto;grid-row:auto;aspect-ratio:9/16}
  .sm-rl .sm-r.top .cp{font-size:15px}
}
@media (max-width:700px){
  .sm-rl{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sm-rl .sm-r.top{grid-column:1/-1;grid-row:auto;aspect-ratio:4/5}
  .sm-fbp .id .av[src$="mm-mark-128.png"]{padding:15px 11px}
}
/* sweep r5 (26 Sep 2026): the 15 Aug post is shown cropped to its headline (no staff call grid), so the hero card shows a wide crop
   and the Facebook mock's media box takes the crop's own ratio */
.sm-fl-f>img{width:96px;height:50px;border-radius:8px;object-position:0 0;border:1px solid var(--line)}
.sm-fbp .m.hd{aspect-ratio:720/372}
/* sweep r5: highlight names at the 12px label floor (were 11px) */
.sm-ig-hl .h{font-size:12px;white-space:nowrap}