/* 3ON Entertainment Group — UI system v4 / SmartersWeb Canada
   Last-loaded public layer. Uses the original 3ON logo artwork.
   Historical .btn-gold/.gold-text classes are aliases only; no gold palette. */
:root {
  color-scheme: dark;
  --gold: #f24964;
  --gold-light: #ff788e;
  --gold-dark: #cf2446;
  --threeon-gold: #f24964;
  --threeon-gold-soft: #ff788e;
  --threeon-red: #f24964;
  --threeon-red-deep: #cf2446;
  --brand-red: #f24964;
  --brand-red-deep: #cf2446;
  --black: #0f1116;
  --dark: #14171d;
  --dark-gray: #1a1e26;
  --card-bg: #1a1e25;
  --gray: #b7c0cd;
  --light-gray: #d0d7e1;
  --ui-ink: #f5f7fa;
  --ui-muted: #bbc4d1;
  --ui-subtle: #8e9aa9;
  --ui-line: rgba(223,233,245,.13);
  --ui-panel: #1a1e26;
  --ui-panel-strong: #20252f;
  --ui-accent: #f24964;
  --ui-action: #ce2444;
  --ui-action-hover: #d92d4d;
  --ui-container: 1320px;
  --ui-radius: 18px;
  --ui-flow: clamp(1rem, 2vw, 1.4rem);
  --ui-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ui-font-display: 'Montserrat', 'Inter', system-ui, sans-serif;
}
html { scroll-padding-top: 118px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { background: var(--black); color: var(--ui-ink); font-family: var(--ui-font-body); font-size: 16px; line-height: 1.65; font-weight: 400; overflow-wrap: break-word; }
:where(button,input,select,textarea) { font-family: var(--ui-font-body); }
:where(h1,h2,h3,h4,h5,h6) { font-family: var(--ui-font-display); line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
:where(p,li,dd,dt) { line-height: inherit; }
:where(a,button,input,textarea,select,summary):focus-visible { outline: 3px solid #ff95a5; outline-offset: 3px; }
::selection { background: rgba(242,73,100,.35); color: #fff; }
img,video,iframe,svg { max-width: 100%; }
img { height: auto; }
.sw-container { max-width: var(--ui-container); padding-inline: clamp(20px,4vw,52px); }
.site-main { min-width: 0; }
.site-main > :where(section,div,article) { min-width: 0; }
.sw-section, .home-section, .section { padding-block: clamp(52px,7vw,96px); }
.section-title, .sw-section-title { font-size: clamp(1.9rem,3.6vw,3.6rem); line-height: 1.13; letter-spacing: -.035em; text-transform: none; }
.sw-body, .section-body { font-family: var(--ui-font-body); line-height: 1.75; font-size: clamp(1rem,1.12vw,1.1rem); color: var(--ui-muted); }
.sw-eyebrow, .section-label { font-size: .74rem; font-weight: 800; letter-spacing: .12em; color: var(--gold-light); }
.sw-eyebrow::before,.section-label::before { width: 23px; background: currentColor; }
.navbar { gap: 24px; }
.nav-logo { flex: 0 0 auto; min-width: 0; }
.nav-logo img { display: block; max-width: min(210px,30vw); max-height: 57px; width: auto; object-fit: contain; }
.nav-links { margin-top: 0; gap: 2px; }
.nav-links a { font-family: var(--ui-font-body); font-size: .85rem; font-weight: 650; letter-spacing: .015em; text-transform: none; }
.nav-cta, .btn-gold, .sw-btn-primary, .platforms-action-primary {
  background: var(--ui-action); background-image: none; border-color: var(--ui-action);
  color: #fff; border-radius: 12px; box-shadow: none;
}
.btn-gold,.btn-outline,.sw-btn-primary,.sw-btn-outline { min-height: 47px; padding: 12px 22px; font-family: var(--ui-font-body); font-size: .87rem; font-weight: 750; letter-spacing: .015em; text-transform: none; }
.nav-cta:hover, .btn-gold:hover, .sw-btn-primary:hover, .platforms-action-primary:hover {
  background: var(--ui-action-hover); background-image: none; border-color: var(--ui-action-hover);
  color: #fff; box-shadow: 0 12px 24px rgba(242,73,100,.13);
}
.btn-outline,.sw-btn-outline { color: #f9e8ee; border-color: rgba(255,130,152,.45); }
.btn-outline:hover,.sw-btn-outline:hover { color: #fff; background: rgba(242,73,100,.12); }
.home-hero-title { font-size: clamp(3.15rem,7vw,6.8rem); line-height: .98; letter-spacing: -.065em; text-transform: none; }
.home-hero-desc { font-family: var(--ui-font-body); line-height: 1.72; }
.home-section-header, .section-header { max-width: 880px; }
.home-section-header p,.section-header p { font-family: var(--ui-font-body); }
.home-faq-item { border-color: var(--ui-line); background: var(--ui-panel); }
.home-faq-item summary { font-size: 1rem; letter-spacing: 0; }
.home-faq-item summary::after { color: var(--gold-light); }
.home-blog-card,.home-spotlight-card,.home-division-card,.division-card {
  border-color: var(--ui-line) !important; background: var(--ui-panel) !important; border-radius: 18px !important;
}
.home-blog-card h3,.home-division-card h3,.home-spotlight-card h3 { line-height: 1.25; text-transform: none; letter-spacing: -.02em; }
/* Editorial page architecture: consistent widths, no nested grid overflow. */
.blog-index-hero,.blog-single-hero,.blog-archive-hero {
  padding-top: clamp(148px,15vw,190px); padding-bottom: clamp(48px,6vw,78px);
  background: radial-gradient(ellipse at 86% 10%, rgba(242,73,100,.13),transparent 55%), linear-gradient(150deg,#1a1d25,#111319 80%);
}
.blog-index-hero .sw-container,.blog-single-hero .sw-container,.blog-archive-hero .sw-container { max-width: 1240px; }
.blog-index-hero h1,.blog-single-hero h1,.blog-archive-hero h1 {
  max-width: 1050px; font-size: clamp(2.1rem,4.4vw,4.2rem); font-weight: 800; line-height: 1.12;
  letter-spacing: -.045em; text-transform: none; overflow-wrap: break-word;
}
.blog-index-hero p,.blog-single-hero p,.blog-archive-hero p {
  font-family: var(--ui-font-body); color: var(--ui-muted); font-size: clamp(1rem,1.4vw,1.17rem); line-height: 1.7;
  max-width: 75ch;
}
.sw-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; font-size: .83rem; font-family: var(--ui-font-body); color: var(--ui-muted); }
.sw-breadcrumbs a { color: #edf0f5; text-decoration: none; }
.sw-breadcrumbs a:hover { color: #ff8296; text-decoration: underline; }
.sw-breadcrumbs [aria-current] { color: #ff98a8; }
.blog-layout-section,.blog-single-section { background: var(--black); }
.sw-container.blog-layout,.sw-container.blog-single-layout { max-width: 1350px; width: 100%; margin-inline: auto; }
.blog-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,306px); align-items: start; gap: clamp(24px,3vw,42px); }
.blog-main,.blog-sidebar,.blog-article-main,.blog-article-sidebar { min-width: 0; }
.blog-sidebar { position: sticky; top: 108px; display: grid; gap: 18px; }
.blog-featured-card,.blog-card,.blog-sidebar-card,.blog-toc,.blog-share-card {
  background: var(--ui-panel) !important; border: 1px solid var(--ui-line) !important; border-radius: var(--ui-radius) !important;
  box-shadow: none !important; overflow: hidden; min-width: 0;
}
/* Featured item lives *inside* the main column: it must not split into two more narrow columns. */
.blog-featured-card { display: flex; flex-direction: column; margin-bottom: 24px; }
.blog-featured-image-link { display: block; flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 8.5; width: 100%; background: #151920; overflow: hidden; }
.blog-featured-image-link img { display: block; min-height: 0; height: 100%; width: 100%; object-fit: cover; }
.blog-featured-body { padding: clamp(22px,3vw,34px); min-width: 0; }
.blog-featured-body h2 { font-size: clamp(1.45rem,2.7vw,2.25rem); font-weight: 800; line-height: 1.23; text-transform: none; letter-spacing: -.035em; margin: 14px 0; }
.blog-featured-body h2 a,.blog-card-body h2 a { text-decoration: none; color: var(--ui-ink); }
.blog-featured-body h2 a:hover,.blog-card-body h2 a:hover { color: #ff8ca0; }
.blog-featured-body p { font-family: var(--ui-font-body); color: var(--ui-muted); font-size: 1rem; line-height: 1.7; }
.blog-meta { font-family: var(--ui-font-body); font-size: .81rem; color: var(--ui-muted); display: flex; flex-wrap: wrap; gap: 8px 20px; }
.blog-featured-body .btn-gold { margin-top: 23px; }
.blog-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(16px,2vw,24px); max-width: none; width: 100%; }
.blog-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color .2s ease, transform .2s ease; }
.blog-card:hover { border-color: rgba(242,73,100,.38) !important; transform: translateY(-2px); }
.blog-card-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; flex: 0 0 auto; background: #151920; overflow: hidden; }
.blog-card-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; padding: clamp(18px,2.2vw,25px); }
.blog-card-body h2 { font-size: clamp(1.09rem,1.55vw,1.34rem); line-height: 1.35; font-weight: 750; text-transform: none; letter-spacing: -.02em; margin: 0; }
.blog-card-body p { font-family: var(--ui-font-body); font-size: .91rem; line-height: 1.68; color: var(--ui-muted); margin: 0; }
.blog-card-body .blog-card-button,.blog-card-body > .btn-outline,.blog-card-body > .btn-gold { width: fit-content; margin-top: auto; align-self: flex-start; }
.blog-pill,.blog-hero-tags a { width: fit-content; max-width: 100%; font-size: .72rem; line-height: 1.25; letter-spacing: .045em; font-weight: 750; padding: 7px 11px; color: #ff9aac; border: 1px solid rgba(242,73,100,.35); background: rgba(242,73,100,.075); text-transform: none; }
.blog-pill:hover,.blog-hero-tags a:hover,.blog-tag-cloud a:hover { background: var(--ui-action); color: #fff; border-color: var(--ui-action); }
.blog-sidebar-card,.blog-toc,.blog-share-card { padding: clamp(19px,2vw,26px); }
.blog-sidebar-title { font-size: .73rem; line-height: 1.4; letter-spacing: .10em; font-weight: 800; color: #ff95a6; margin-bottom: 14px; }
.blog-sidebar-card h2 { font-size: clamp(1.15rem,1.8vw,1.5rem); text-transform: none; letter-spacing: -.025em; line-height: 1.25; }
.blog-sidebar-card p,.blog-sidebar-cta p { font-family: var(--ui-font-body); color: var(--ui-muted); font-size: .93rem; line-height: 1.7; }
.blog-category-list a { font-family: var(--ui-font-body); font-size: .89rem; color: var(--ui-muted); }
.blog-category-list strong { color: #ff98a9; }
.blog-tag-cloud a { font-size: .76rem; letter-spacing: 0; text-transform: none; color: #ff9aac; }
.blog-subscribe-form label { font-family: var(--ui-font-body); font-weight: 700; font-size: .87rem; color: var(--ui-ink); }
.blog-subscribe-form input,.blog-subscribe-form textarea { min-height: 48px; font-size: 16px; font-family: var(--ui-font-body); border-radius: 11px; background: #12151b; border-color: var(--ui-line); color: #fff; }
.blog-subscribe-form input:focus { border-color: #ff7588; box-shadow: 0 0 0 3px rgba(242,73,100,.14); }
.blog-archive-header { min-width: 0; }
.blog-archive-header h2,.blog-archive-header h1 { text-transform: none; }
/* Long-form articles: readable column length and fixed sidebar wrapping. */
.blog-single-layout { display: grid; grid-template-columns: minmax(230px,275px) minmax(0,1fr); gap: clamp(24px,4vw,60px); align-items: start; }
.blog-article-sidebar { position: sticky; top: 108px; display: grid; gap: 17px; }
.blog-article-main { max-width: 100%; }
.blog-toc { max-height: min(68vh,700px); overflow-y: auto; overscroll-behavior: contain; }
.blog-toc ol { display: grid; gap: 10px; }
.blog-toc a { display: block; color: var(--ui-muted); font-size: .84rem; font-family: var(--ui-font-body); line-height: 1.53; padding-left: 9px; border-left: 2px solid transparent; }
.blog-toc a:hover,.blog-toc a.active,.blog-toc a[aria-current] { color: #ffe8ed; border-left-color: var(--ui-accent); }
.blog-featured-wrap { border-radius: var(--ui-radius); border: 1px solid var(--ui-line); box-shadow: none; margin-bottom: clamp(24px,3vw,35px); }
.blog-featured-image,.sw-featured-image.blog-featured-image { width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-lead { font-family: var(--ui-font-body); color: #ecedf3; background: rgba(242,73,100,.075); border-color: rgba(242,73,100,.24); padding: clamp(20px,3vw,30px); border-radius: 16px; font-size: clamp(1.06rem,1.5vw,1.23rem); line-height: 1.75; }
.blog-article-body { min-width: 0; max-width: 100%; font-family: var(--ui-font-body); font-size: clamp(1.015rem,1.12vw,1.1rem); line-height: 1.82; color: #d7dee8; }
.blog-article-body > :where(p,h2,h3,h4,ul,ol,blockquote,figure) { max-width: 76ch; }
.blog-article-body :where(p,li) { font-family: var(--ui-font-body); font-size: inherit; line-height: 1.82; color: #d7dee8; }
.blog-article-body p { margin-block: 0 1.3em; }
.blog-article-body :where(h2,h3,h4) { font-family: var(--ui-font-display); text-transform: none; text-wrap: pretty; }
.blog-article-body h2 { font-size: clamp(1.46rem,2.3vw,2rem); line-height: 1.26; letter-spacing: -.025em; margin-block: 2.2em .65em; color: #fff; }
.blog-article-body h3 { font-size: clamp(1.22rem,1.85vw,1.6rem); line-height: 1.35; color: #ff9aac; margin-block: 1.7em .55em; }
.blog-article-body h4 { font-size: 1.12rem; margin-block: 1.55em .5em; }
.blog-article-body :where(ul,ol) { padding-left: 1.5em; margin-block: 1.1em 1.5em; }
.blog-article-body li { margin-block: .4em; }
.blog-article-body a { color: #ff9bad; text-decoration: underline; text-underline-offset: 3px; }
.blog-article-body a:hover { color: #fff; }
.blog-article-body blockquote { margin-block: 1.8em; border-left: 3px solid var(--ui-accent); color: #fff; background: rgba(242,73,100,.06); padding: 1.1em 1.3em; }
.blog-article-body :where(img,video,iframe) { max-width: 100%; height: auto; }
.blog-article-body :where(iframe[src*="youtube"],iframe[src*="vimeo"]) { width: 100%; aspect-ratio: 16/9; height: auto; }
.blog-article-body :where(pre,table) { max-width: 100%; overflow-x: auto; }
.blog-article-body table { display: block; width: max-content; border-collapse: collapse; }
.blog-article-body :where(td,th) { border: 1px solid var(--ui-line); padding: 9px 13px; }
.blog-article-body pre { background: #171a22; padding: 16px; border-radius: 12px; }
.blog-hero-meta { font-family: var(--ui-font-body); gap: 9px 24px; font-size: .93rem; color: var(--ui-muted); }
.blog-hero-meta :is(span,time) { position: relative; }
.blog-hero-meta :is(span,time):not(:last-child)::after { content: '·'; position: absolute; right: -15px; color: #ff96a7; }
.blog-hero-category { font-size: .77rem; letter-spacing: .09em; color: #ff95a6; }
.blog-engagement-box,.blog-comments-box,.blog-subscribe-inline,.blog-final-cta { max-width: 100%; overflow-wrap: break-word; }
.blog-subscribe-inline,.blog-final-cta,.blog-article-main .sw-cta-box { padding: clamp(22px,3.3vw,42px); border-radius: var(--ui-radius); background: var(--ui-panel); box-shadow: none; }
.blog-subscribe-inline h2,.blog-final-cta h2,.blog-article-main .sw-cta-box h2 { text-transform: none; line-height: 1.2; letter-spacing: -.025em; }
.blog-share-links a,.blog-share-links button,.blog-icon-button { border-color: rgba(242,73,100,.26); color: #ff9aab; }
.blog-share-links :is(a,button):hover { background: var(--ui-action); color: #fff; }
.blog-reading-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 1500; pointer-events: none; background: transparent; }
.blog-reading-progress span { height: 100%; display: block; width: 0; background: linear-gradient(90deg,#ee3459,#ff8ba0); }
.blog-reading-progress[hidden] { display: none !important; }
/* New ecosystem pages and footer follow the same type and accent treatment. */
.platforms-hero { background: radial-gradient(ellipse at 80% 18%,rgba(242,73,100,.14),transparent 48%),#11141a; }
.platforms-hero h1 { font-size: clamp(2.3rem,5.4vw,5.1rem); line-height: 1.08; }
.platforms-hero .platforms-lede,.platform-card p,.platform-detail-panel p { font-family: var(--ui-font-body); line-height: 1.73; }
.platform-card,.platform-detail-panel { background: var(--ui-panel); border-color: var(--ui-line); }
.platform-card-icon { color: #ff9caa; background: rgba(242,73,100,.085); }
.platform-card-link { color: #ffa5b4; }
.footer { background: #12151b; border-top: 1px solid var(--ui-line); }
.footer-ecosystem { border-color: var(--ui-line); }
.footer-ecosystem h2 { font-size: clamp(1.35rem,2.6vw,2.05rem); line-height: 1.25; letter-spacing: -.025em; }
.footer-ecosystem p,.footer-tagline { font-family: var(--ui-font-body); color: var(--ui-muted); line-height: 1.75; }
.footer-tool-pill { font-size: .87rem; font-weight: 700; border-color: var(--ui-line); }
.footer-col h4 { font-size: .79rem; letter-spacing: .06em; }
.footer-col a { font-size: .89rem; line-height: 1.55; }
.footer-bottom { font-size: .82rem; }
.analytics-consent__accept { background: var(--ui-action); border-color: var(--ui-action); color: #fff !important; }
.analytics-consent__copy strong { color: #ff8497; }
.analytics-consent__actions a { color: #ff9aab; }
@media (max-width: 1120px) {
  .blog-layout { grid-template-columns: minmax(0,1fr) 270px; gap: 24px; }
  .blog-single-layout { grid-template-columns: minmax(220px,245px) minmax(0,1fr); gap: 25px; }
}
@media (max-width: 960px) {
  .blog-layout,.blog-single-layout { grid-template-columns: minmax(0,1fr); }
  .blog-sidebar,.blog-article-sidebar { position: static; top: auto; }
  .blog-article-sidebar { order: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .blog-article-main { order: 1; }
  .blog-sidebar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .blog-sidebar > :first-child { grid-column: 1 / -1; }
  .blog-toc { max-height: none; }
  .home-hero { padding-top: 135px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 85px; }
  body { font-size: 15.5px; }
  .navbar { gap: 10px; }
  .nav-logo img { max-width: 165px; max-height: 51px; }
  .sw-container { padding-inline: 20px; }
  .sw-section,.home-section,.section { padding-block: 48px; }
  .blog-index-hero,.blog-single-hero,.blog-archive-hero { padding-top: 136px; padding-bottom: 45px; }
  .blog-index-hero h1,.blog-single-hero h1,.blog-archive-hero h1 { font-size: clamp(2rem,9vw,2.7rem); line-height: 1.15; }
  .blog-grid { grid-template-columns: minmax(0,1fr); }
  .blog-sidebar,.blog-article-sidebar { grid-template-columns: minmax(0,1fr); }
  .blog-featured-image-link { aspect-ratio: 16 / 10; }
  .blog-featured-body { padding: 22px; }
  .blog-card-image { aspect-ratio: 16 / 9; }
  .blog-card-body { padding: 19px; }
  .blog-card-body h2 { font-size: 1.24rem; }
  .blog-hero-meta { gap: 7px 16px; }
  .blog-hero-meta :is(span,time)::after { display: none; }
  .blog-article-body { font-size: 1.03rem; }
  .blog-article-body h2 { font-size: 1.48rem; }
  .blog-article-body h3 { font-size: 1.25rem; }
  .blog-featured-wrap { border-radius: 14px; }
  .blog-lead { padding: 18px; }
  .blog-subscribe-inline,.blog-final-cta,.blog-article-main .sw-cta-box { padding: 21px; }
  .subscribe-row { grid-template-columns: 1fr; }
  .blog-subscribe-form .btn-gold { width: 100%; }
  .home-hero-title { font-size: clamp(2.9rem,13vw,4.25rem); }
  .home-hero-stats { gap: 11px; }
  .footer-ecosystem h2 { font-size: 1.5rem; }
  .footer-tool-pills { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
}
@media (max-width: 390px) {
  .footer-tool-pills { grid-template-columns: minmax(0,1fr); }
  .home-hero-title { font-size: 2.8rem; }
  .blog-index-hero h1,.blog-single-hero h1 { font-size: 1.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-card,.blog-featured-image-link img { transition: none; }
  .blog-card:hover { transform: none; }
}