/* Social AI (redesign): three phones side by side, one idea written three ways, and the week they would fill.
   Light phone frames only. The ribbon frames the right edge behind the last phone. */
.so-hero{padding-bottom:var(--s9)}
.so-desk{margin-top:var(--s8);display:grid;gap:var(--s6)}
.so-idea{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.so-ib{font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.so-idea .illus{margin-left:auto}
.so-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);align-items:start}
.sp{display:grid;gap:14px;justify-items:center}
.sp-plat{font-size:17px;font-weight:800;color:var(--ink)}
.sp .ph-frame{width:min(330px,100%);padding:10px;border-radius:40px;background:#fff;box-shadow:0 0 0 1px var(--line),0 36px 70px -38px rgba(8,80,180,.5);transition:box-shadow .4s ease}
.sp.ok .ph-frame{box-shadow:0 0 0 2px var(--t-teal),0 36px 70px -38px rgba(8,80,180,.5)}
.ph-scr{height:520px;border-radius:31px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px #EEF3FA;padding:18px 0 0;display:flex;flex-direction:column;gap:12px}
.ph-hd{display:flex;align-items:center;gap:10px;padding:0 16px}
.av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#FFF0F2;color:var(--t-coral);font-size:13px;font-weight:800}
.ph-hd b{display:block;font-size:15px;color:var(--ink)}.ph-hd small{display:block;font-size:13.5px;color:var(--text)}
.ph-sq{width:100%;aspect-ratio:1;object-fit:cover}
.ph-wd{width:100%;aspect-ratio:1.4;object-fit:cover}
.ph-tx{padding:0 16px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.ph-grp{margin:0 12px;padding:8px 12px;border-radius:10px;background:var(--cloud);font-size:14px;font-weight:700;color:var(--deep)}
.sp-meta{width:min(330px,100%);display:grid}
.sp-meta div{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.45}
.sp-meta dt{font-weight:700;color:var(--deep)}.sp-meta dd{color:var(--ink)}
.sp-ok{width:min(330px,100%);justify-content:center}
.sp-ok:disabled{box-shadow:none;background:#E3F7F4;color:var(--t-teal);cursor:default}
.so-week{overflow:hidden}
.so-week .x-ui-bar{flex-wrap:wrap}
.so-note{font-size:15px;color:var(--text)}
.sw-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.sw-d{min-height:170px;padding:14px 12px;display:grid;align-content:start;gap:8px;border-left:1px solid var(--line)}
.sw-d:first-child{border-left:0}
.sw-d>b{font-size:15px;color:var(--text)}
.sw-ev{display:grid;gap:2px;padding:10px 12px;border-radius:10px;background:var(--ice);font-size:15px;color:var(--ink)}
.sw-ev b{font-size:15px}.sw-ev small{font-size:13.5px;color:var(--text)}

/* the comments inbox */
.so-rp-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7) var(--s9);align-items:center}
.so-rp-copy{display:grid;gap:var(--s5)}
.so-src{font-size:15px;color:var(--text)}.so-src a{color:var(--deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.inbox{overflow:hidden}
.inbox ol{display:grid}
.inbox li{display:grid;gap:10px;padding:18px 22px;border-top:1px solid var(--line)}
.inbox li:first-child{border-top:0}
.cm{font-size:17px;line-height:1.45;color:var(--ink)}.cm b{display:block;font-size:14.5px;color:var(--text)}
.rp{display:grid;gap:6px;justify-items:start;margin-left:24px;padding:12px 14px;border-radius:12px;background:#F7FAFF;font-size:16px;line-height:1.5;color:var(--ink)}
.wait{margin-left:24px;font-size:14.5px;font-weight:700;color:var(--t-amber)}

@media (max-width:1100px){.so-posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.ph-scr{height:500px}.so-rp-in{grid-template-columns:1fr}.sw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.sw-d:nth-child(5){border-left:0}.sw-d:nth-child(n+5){border-top:1px solid var(--line)}}
@media (max-width:900px){.so-posts{grid-template-columns:1fr 1fr}.sp-fb{grid-column:1/-1}}
@media (max-width:760px){.so-posts{grid-template-columns:1fr}.sp-fb{grid-column:auto}.so-idea .illus{margin-left:0}.sw-grid{grid-template-columns:1fr 1fr}.sw-d{min-height:96px;border-left:0;border-top:1px solid var(--line)}.sw-d:nth-child(even){border-left:1px solid var(--line)}.ph-scr{height:auto;padding-bottom:16px}}
.ph-bar{display:flex;gap:18px;padding:10px 16px;border-top:1px solid #EEF3FA;font-size:14px;font-weight:700;color:var(--text)}
.ph-prev{margin-top:4px;padding-top:14px;border-top:8px solid var(--cloud);display:grid;gap:10px;opacity:.75}
.av.g{background:#F2F5FA;color:var(--muted)}