/* =========================================================
   SINGLE-FILE ARTICLE DETAIL VIEW
   Works inside the same HTML as Beyond the Brand home.
   ========================================================= */
.sfbb-one-detail{
  --p:#6f3cff;--p2:#8b5cff;--g:#22c55e;--ink:#171329;--muted:#6f6a7d;
  --soft:#f7f5ff;--line:#e9e5f2;--dark:#171329;--shadow:0 18px 50px rgba(50,34,90,.10);
  display:none;width:100%;overflow:hidden;background:#fff;color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.72
}
.sfbb-one-detail.open{display:block}
.sfbb-one-detail*,.sfbb-one-detail*::before,.sfbb-one-detail*::after{box-sizing:border-box}
.sfbb-one-detail img{display:block;width:100%;max-width:100%}
.sfbb-one-detail button,.sfbb-one-detail a{font:inherit}.sfbb-one-detail a{text-decoration:none;color:inherit}
.sfbb-one-detail .od-wrap{width:min(1160px,calc(100% - 40px));margin:auto}
.sfbb-one-detail h1,.sfbb-one-detail h2,.sfbb-one-detail h3{margin:0;color:var(--ink);line-height:1.1}
.sfbb-one-detail h1{font-size:clamp(43px,6vw,72px);letter-spacing:-3px}
.sfbb-one-detail h2{font-size:clamp(28px,3.5vw,43px);letter-spacing:-1.4px}
.sfbb-one-detail h3{font-size:20px}.sfbb-one-detail p{margin:0;color:var(--muted)}
.sfbb-one-detail .od-gradient{background:linear-gradient(90deg,var(--p),#a13dff,var(--g));-webkit-background-clip:text;background-clip:text;color:transparent}
.sfbb-one-detail .od-kicker{font-size:10px;font-weight:900;letter-spacing:1.4px;text-transform:uppercase;color:var(--p)}
.sfbb-one-detail .od-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 18px;border:0;border-radius:12px;font-size:11px;font-weight:900;cursor:pointer}
.sfbb-one-detail .od-primary{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff;box-shadow:0 12px 28px rgba(111,60,255,.22)}
.sfbb-one-detail .od-light{background:#fff;color:var(--ink);border:1px solid var(--line)}

.sfbb-one-detail .od-head{position:relative;padding:56px 0 34px;background:radial-gradient(circle at 8% 15%,rgba(111,60,255,.11),transparent 25%),radial-gradient(circle at 92% 14%,rgba(34,197,94,.08),transparent 23%),linear-gradient(180deg,#fff,#fbfaff)}
.sfbb-one-detail .od-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:20px;border:0;background:transparent;color:#6f6779;font-size:9px;font-weight:850;cursor:pointer}.sfbb-one-detail .od-back:hover{color:var(--p)}
.sfbb-one-detail .od-crumb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:16px;color:#877f90;font-size:9px;font-weight:750}
.sfbb-one-detail .od-crumb button{all:unset;cursor:pointer}.sfbb-one-detail .od-crumb button:hover{color:var(--p)}
.sfbb-one-detail .od-head-grid{display:grid;grid-template-columns:1fr .38fr;gap:44px;align-items:end}
.sfbb-one-detail .od-intro{max-width:820px;margin-top:17px;font-size:17px}
.sfbb-one-detail .od-meta{display:flex;gap:8px 14px;flex-wrap:wrap;margin-top:20px;color:#7f7789;font-size:9px;font-weight:750}
.sfbb-one-detail .od-author{padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.sfbb-one-detail .od-author-top{display:flex;align-items:center;gap:11px}.sfbb-one-detail .od-avatar{width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#8b5cff,#6f3cff);color:#fff;font-weight:900}
.sfbb-one-detail .od-author b{display:block;font-size:11px}.sfbb-one-detail .od-author span{display:block;color:#8a8393;font-size:8px}.sfbb-one-detail .od-author p{margin-top:10px;font-size:9px}
.sfbb-one-detail .od-media{padding:0 0 28px;background:#fbfaff}.sfbb-one-detail .od-hero{overflow:hidden;aspect-ratio:16/8.2;border-radius:28px;border:1px solid var(--line);box-shadow:var(--shadow);background:#eee9f0}
.sfbb-one-detail .od-hero img{height:100%;object-fit:cover;filter:saturate(.82)}

.sfbb-one-detail .od-mobile-toc{display:none;margin:18px 0}.sfbb-one-detail .od-mobile-toc>button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:10px;font-weight:850;cursor:pointer}
.sfbb-one-detail .od-mobile-links{display:none;padding:11px 12px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px}.sfbb-one-detail .od-mobile-toc.open .od-mobile-links{display:grid;gap:8px}.sfbb-one-detail .od-mobile-links a{font-size:9px;color:#6d6576}
.sfbb-one-detail .od-content-wrap{display:grid;grid-template-columns:245px minmax(0,1fr);gap:42px;padding:50px 0 78px}
.sfbb-one-detail .od-sticky{position:sticky;top:24px;display:grid;gap:14px}.sfbb-one-detail .od-side-card{padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff}.sfbb-one-detail .od-side-card h3{font-size:13px}
.sfbb-one-detail .od-toc{display:grid;gap:8px;margin-top:11px}.sfbb-one-detail .od-toc a{font-size:9px;color:#756e7e}.sfbb-one-detail .od-toc a:hover,.sfbb-one-detail .od-toc a.active{color:var(--p);font-weight:850}
.sfbb-one-detail .od-share{display:flex;gap:7px;margin-top:11px}.sfbb-one-detail .od-share button{width:34px;height:34px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:10px;font-weight:900;color:#5b5264}.sfbb-one-detail .od-share button:hover{border-color:#cbbcff;color:var(--p)}
.sfbb-one-detail .od-progress-text{font-size:9px;color:#817989}.sfbb-one-detail .od-progress-track{height:6px;margin-top:9px;border-radius:99px;background:#eeeaf4;overflow:hidden}.sfbb-one-detail .od-progress{height:100%;width:0;background:linear-gradient(90deg,var(--p),var(--g))}
.sfbb-one-detail .od-body{min-width:0}.sfbb-one-detail .od-body>p,.sfbb-one-detail .od-body section>p{font-size:15px;margin-top:14px}.sfbb-one-detail .od-body h2{margin-top:44px}.sfbb-one-detail .od-body h3{margin-top:28px}.sfbb-one-detail .od-body ul,.sfbb-one-detail .od-body ol{color:var(--muted);padding-left:20px;font-size:14px}.sfbb-one-detail .od-body li{margin:8px 0}
.sfbb-one-detail .od-takeaways{padding:25px;border:1px solid #ddd4ff;border-radius:21px;background:linear-gradient(145deg,#f7f3ff,#f4fff7);margin-bottom:34px}.sfbb-one-detail .od-takeaways h2{margin:0;font-size:28px}.sfbb-one-detail .od-take-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:16px}.sfbb-one-detail .od-take{padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:10px;font-weight:800;color:#5d5668}.sfbb-one-detail .od-take::before{content:"✓";color:var(--g);margin-right:6px}
.sfbb-one-detail .od-callout{margin:30px 0;padding:22px 24px;border-left:4px solid var(--p);border-radius:0 16px 16px 0;background:#f8f5ff;color:#554d61;font-size:15px;font-weight:700}
.sfbb-one-detail .od-deep{margin:38px 0;padding:24px;border:1px solid var(--line);border-radius:22px;background:#fbfafc}.sfbb-one-detail .od-deep-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.sfbb-one-detail .od-deep-tab{padding:8px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#625a6d;font-size:9px;font-weight:850;cursor:pointer}.sfbb-one-detail .od-deep-tab.active{background:var(--p);color:#fff;border-color:var(--p)}
.sfbb-one-detail .od-panel{display:none}.sfbb-one-detail .od-panel.active{display:block}.sfbb-one-detail .od-panel h3{margin:0 0 9px}.sfbb-one-detail .od-panel p{font-size:12px}.sfbb-one-detail .od-checks{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.sfbb-one-detail .od-check{display:flex;align-items:flex-start;gap:8px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#625a6d;font-size:9px}.sfbb-one-detail .od-check input{accent-color:var(--p)}
.sfbb-one-detail .od-faq{padding:12px 0;border-bottom:1px solid var(--line)}.sfbb-one-detail .od-faq:last-child{border-bottom:0}.sfbb-one-detail .od-faq b{font-size:10px}.sfbb-one-detail .od-faq p{font-size:10px;margin-top:4px}
.sfbb-one-detail .od-video{margin:36px 0;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#171329}.sfbb-one-detail .od-video-cover{aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,#5a3378,#171329 65%);color:#fff;text-align:center;padding:25px}.sfbb-one-detail .od-video-cover button{width:65px;height:65px;border:0;border-radius:50%;background:#fff;color:var(--p);font-size:22px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.22)}.sfbb-one-detail .od-video-cover b{display:block;margin-top:12px;font-size:14px}.sfbb-one-detail .od-video-cover span{display:block;margin-top:4px;font-size:9px;color:#d8cfdf}.sfbb-one-detail .od-video-note{padding:12px 16px;color:#cfc7d8;font-size:9px}
.sfbb-one-detail .od-article-nav{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:48px;padding-top:25px;border-top:1px solid var(--line)}.sfbb-one-detail .od-nav-card{padding:17px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;text-align:left}.sfbb-one-detail .od-nav-card small{font-size:8px;text-transform:uppercase;color:#8b8395;font-weight:900}.sfbb-one-detail .od-nav-card b{display:block;margin-top:5px;font-size:11px}.sfbb-one-detail .od-nav-card:hover{border-color:#cfc1ff}
.sfbb-one-detail .od-related{padding:70px 0;background:#fbfafc}.sfbb-one-detail .od-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.sfbb-one-detail .od-related-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;cursor:pointer;text-align:left;padding:0}.sfbb-one-detail .od-related-img{height:190px;overflow:hidden}.sfbb-one-detail .od-related-img img{height:100%;object-fit:cover}.sfbb-one-detail .od-related-copy{padding:14px}.sfbb-one-detail .od-related-copy h3{font-size:12px}.sfbb-one-detail .od-related-copy p{font-size:9px;margin-top:5px}

.sfbb-one-video{position:fixed;inset:0;z-index:9999999;display:none;place-items:center;padding:20px;background:rgba(10,7,17,.82);backdrop-filter:blur(10px)}.sfbb-one-video.open{display:grid}.sfbb-one-video-player{width:min(960px,100%);position:relative}.sfbb-one-video-player .od-vclose{position:absolute;z-index:3;right:-7px;top:-45px;width:36px;height:36px;border:0;border-radius:50%;background:#fff;cursor:pointer;font-size:18px}.sfbb-one-video-player .od-frame{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000}.sfbb-one-video-player iframe{width:100%;height:100%;border:0}
.sfbb-one-toast{position:fixed;z-index:10000000;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 14px;border-radius:999px;background:#171329;color:#fff;font-size:9px;font-weight:800;transition:.2s}.sfbb-one-toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1000px){
  .sfbb-one-detail .od-head-grid{grid-template-columns:1fr}.sfbb-one-detail .od-author{max-width:480px}.sfbb-one-detail .od-content-wrap{grid-template-columns:1fr}.sfbb-one-detail .od-sidebar{display:none}.sfbb-one-detail .od-mobile-toc{display:block}
}
@media(max-width:700px){
  .sfbb-one-detail .od-wrap{width:min(100% - 28px,1160px)}.sfbb-one-detail .od-head{padding:44px 0 26px}.sfbb-one-detail h1{font-size:clamp(39px,11.5vw,53px);letter-spacing:-2.1px}.sfbb-one-detail h2{font-size:clamp(28px,8vw,38px)}.sfbb-one-detail .od-intro{font-size:15px}.sfbb-one-detail .od-hero{aspect-ratio:4/3;border-radius:20px}.sfbb-one-detail .od-content-wrap{padding:35px 0 58px}.sfbb-one-detail .od-body>p,.sfbb-one-detail .od-body section>p{font-size:14px}.sfbb-one-detail .od-take-grid,.sfbb-one-detail .od-checks{grid-template-columns:1fr}.sfbb-one-detail .od-deep-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.sfbb-one-detail .od-deep-tabs::-webkit-scrollbar{display:none}.sfbb-one-detail .od-deep-tab{white-space:nowrap}.sfbb-one-detail .od-article-nav{grid-template-columns:1fr}.sfbb-one-detail .od-related-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.sfbb-one-detail .od-related-grid::-webkit-scrollbar{display:none}.sfbb-one-detail .od-related-card{flex:0 0 82%;scroll-snap-align:start}
}
/* Support actual administrator-written prose and comments without changing the client frame. */
.sfbb-one-detail .editorial-prose{overflow-wrap:anywhere}
.sfbb-one-detail .editorial-prose img,.sfbb-one-detail .editorial-prose video,.sfbb-one-detail .editorial-prose iframe{max-width:100%}
.sfbb-one-detail .editorial-prose table{display:block;max-width:100%;overflow-x:auto}
.sfbb-one-detail a:focus-visible,.sfbb-one-detail button:focus-visible{outline:3px solid #8b5cff;outline-offset:4px}