/* ============================================================================
   kindr - THE HOME PAGE's bands (templates/landing -> partials/social/home; theme.json
   vendors.landing, after css/chrome.css): the hero and its slider, our why, why it
   matters, features & tools, mindful kindness, the four arenas, the content hub and
   its sidebar, it takes a village. Tokens, base, buttons, top bar, header and
   footer: css/chrome.css (every page). Every rule is scoped to body.kd-social and
   every class is kd2- prefixed. 14px floor.
   ============================================================================ */

/* the Townsquare rows keep their own type (townsquare.css), over bekindr-live.css's h3 and p */
body.kd-social .kd2-rows .tq-post p { margin-bottom: 0; }
body.kd-social .kd2-rows .tq-post .tq-ex { color: var(--tq-soft); }

/* ---------- 3 the hero, its slider and the impact strip ---------- */
body.kd-social .kd2-hero { position: relative; overflow: hidden; padding: 80px 0 0; }
body.kd-social .kd2-hero__blob1 { width: 560px; height: 560px; background: var(--kd2-magenta); top: -160px; left: -140px; opacity: .42; }
body.kd-social .kd2-hero__blob2 { width: 520px; height: 520px; background: var(--kd2-sky); top: 120px; left: 38%; opacity: .32; animation-delay: -6s; }
body.kd-social .kd2-hero__blob3 { width: 460px; height: 460px; background: var(--kd2-sun); bottom: -120px; right: -100px; opacity: .28; animation-delay: -12s; }
body.kd-social .kd2-hero__art { position: absolute; top: -8%; height: 120%; width: auto; max-width: none; opacity: .05; pointer-events: none; }
body.kd-social .kd2-hero__art--a { right: -2%; animation: kd2-art-a 34s ease-in-out infinite alternate; }
body.kd-social .kd2-hero__art--b { left: -6%; transform: scaleX(-1); animation: kd2-art-b 46s ease-in-out infinite alternate; }
@keyframes kd2-art-a { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-24px, -22px) scale(1.05) rotate(-1.5deg); } 100% { transform: translate(12px, -40px) scale(1.08) rotate(1deg); } }
@keyframes kd2-art-b { 0% { transform: scaleX(-1) translate(0, 0) scale(1); } 100% { transform: scaleX(-1) translate(-30px, -34px) scale(1.06); } }
body.kd-social .kd2-hero__ground { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 50%; object-fit: cover; object-position: center 70%; opacity: .16; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(180deg, transparent, var(--kd2-ink) 70%); mask-image: linear-gradient(180deg, transparent, var(--kd2-ink) 70%); pointer-events: none; }
body.kd-social .kd2-hero__wrap { position: relative; z-index: 2; }
body.kd-social .kd2-hero__grid { gap: 48px; align-items: center; }
body.kd-social .kd2-hero__badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; font-size: 14px; color: var(--kd2-on2); }
body.kd-social .kd2-hero__badge img { width: 28px; height: 28px; object-fit: contain; background: var(--kd2-white); border-radius: 50%; padding: 4px; }
body.kd-social .kd2-hero__title { margin-top: 28px; font-weight: 700; font-size: clamp(48px, 6.6vw, 104px); line-height: .96; letter-spacing: -.035em; color: var(--kd2-on); }
body.kd-social .kd2-hero__text { margin-top: 28px; max-width: 580px; font-size: 19px; line-height: 1.6; color: var(--kd2-soft); }
body.kd-social .kd2-hero__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
body.kd-social .kd2-slider { position: relative; height: 600px; border-radius: 32px; overflow: hidden; background: var(--kd2-night2); box-shadow: 0 40px 100px rgba(var(--kd2-black-rgb), .5); }
body.kd-social .kd2-slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 1s ease; }
body.kd-social .kd2-slide.is-on { opacity: 1; pointer-events: auto; }
body.kd-social .kd2-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 7s ease-out; }
body.kd-social .kd2-slide.is-on .kd2-slide__img { transform: scale(1); }
body.kd-social .kd2-slide--globe { background: radial-gradient(70% 55% at 50% 30%, rgba(var(--kd2-lilac-rgb), .55), rgba(var(--kd2-night3-rgb), 0) 70%), linear-gradient(180deg, var(--kd2-night3), var(--kd2-ink)); }
body.kd-social .kd2-slide .kd2-slide__img--globe { object-fit: contain; inset: 5% 13% auto 13%; width: 74%; height: 58%; animation: kd2-spin 140s linear infinite; }
body.kd-social .kd2-slide__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--kd2-ink-rgb), 0) 22%, rgba(var(--kd2-ink-rgb), .72) 52%, rgba(var(--kd2-ink-rgb), .96) 86%); }
body.kd-social .kd2-slide__body { position: absolute; left: 30px; right: 30px; bottom: 92px; opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .25s; }
body.kd-social .kd2-slide.is-on .kd2-slide__body { opacity: 1; transform: none; transition: opacity .6s .5s, transform .6s .5s; }
body.kd-social .kd2-slide__tag { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--kd2-white); color: var(--kd2-ink); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
body.kd-social .kd2-slide__title { margin-top: 14px; font-weight: 600; font-size: 30px; line-height: 1.08; letter-spacing: -.02em; color: var(--kd2-on); }
body.kd-social .kd2-slide__text { margin-top: 12px; font-size: 15px; line-height: 1.55; color: var(--kd2-on4); }
body.kd-social .kd2-slide__body .kd2-btn { margin-top: 18px; }
body.kd-social .kd2-slider__bar { position: absolute; left: 20px; right: 24px; bottom: 22px; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
body.kd-social .kd2-slider__dots { display: flex; align-items: center; }
body.kd-social .kd2-slider__arrows { display: flex; gap: 10px; }
body.kd-social .kd2-stats { margin-top: 48px; border-radius: 24px 24px 0 0; border-bottom: 0; overflow: hidden; }
body.kd-social .kd2-stats__grid { display: grid; grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr)); align-items: stretch; }
body.kd-social .kd2-stats__head { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 16px 24px; border-right: 1px solid rgba(var(--kd2-white-rgb), .1); }
body.kd-social .kd2-stats__title { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
body.kd-social .kd2-stats__dot { width: 9px; height: 9px; border-radius: 50%; }
body.kd-social .kd2 .kd2-stats__link { min-height: 32px; font-size: 14px; color: var(--kd2-soft); }
body.kd-social .kd2 .kd2-stats__link:hover { color: var(--kd2-white); }
body.kd-social .kd2-stats__cell { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-right: 1px solid rgba(var(--kd2-white-rgb), .1); transition: background .3s; }
body.kd-social .kd2-stats__cell:last-child { border-right: 0; }
body.kd-social .kd2-stats__cell:hover { background: rgba(var(--kd2-white-rgb), .05); }
body.kd-social .kd2-stats__num { flex: none; font-size: 32px; }
body.kd-social .kd2-stats__label { max-width: 130px; font-size: 14px; line-height: 1.3; color: var(--kd2-muted); }

/* ---------- 4 our why: the ecosystem hub ---------- */
body.kd-social .kd2-why { position: relative; overflow: hidden; padding: 130px 0 120px; background: linear-gradient(180deg, var(--kd2-lav4), var(--kd2-lav5)); color: var(--kd2-ink); }
body.kd-social .kd2-wave--why { opacity: .05; }
body.kd-social .kd2-why__grid { gap: 56px; align-items: center; }
body.kd-social .kd2-why__title { margin-top: 20px; font-size: clamp(40px, 4.8vw, 72px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
body.kd-social .kd2-why__text { margin-top: 26px; max-width: 600px; font-size: 19px; line-height: 1.65; color: var(--kd2-text); }
body.kd-social .kd2-why__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
body.kd-social .kd2 .kd2-why__lnk { margin-top: 26px; }
body.kd-social .kd2-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--kd2-white); border: 1.5px solid var(--kd2-line); font-size: 16px; font-weight: 500; color: var(--kd2-ink); cursor: pointer; box-shadow: 0 4px 12px rgba(var(--kd2-ink-rgb), .04); transition: transform .2s, box-shadow .2s, border-color .2s; }
body.kd-social .kd2-chip:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(var(--kd2-violet-rgb), .14); }
body.kd-social .kd2-chip.is-on { border-color: var(--kd2-violet); box-shadow: 0 0 0 3px rgba(var(--kd2-violet-rgb), .15), 0 10px 22px rgba(var(--kd2-violet-rgb), .14); }
body.kd-social .kd2-chip__dot { width: 8px; height: 8px; border-radius: 50%; }
body.kd-social .kd2-eco { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1 / 1; margin: 0 auto; }
body.kd-social .kd2-eco__ring { position: absolute; border-radius: 50%; border: 1.5px dashed rgba(var(--kd2-violet-rgb), .22); pointer-events: none; }
body.kd-social .kd2-eco__ring--in { inset: 14%; }
body.kd-social .kd2-eco__ring--out { inset: 2%; border-style: dotted; opacity: .6; }
body.kd-social .kd2-eco__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.kd-social .kd2-eco__hex { fill: none; stroke: rgba(var(--kd2-violet-rgb), .14); stroke-width: 1; vector-effect: non-scaling-stroke; }
body.kd-social .kd2-eco__line { stroke: rgba(var(--kd2-violet-rgb), .28); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke .3s; }
body.kd-social .kd2-eco__line.is-on { stroke: var(--kd2-sun-d); stroke-width: 2.5; stroke-dasharray: 3 7; animation: kd2-flow 2.4s linear infinite; }
@keyframes kd2-flow { to { stroke-dashoffset: -40; } }
body.kd-social .kd2-eco__core { position: absolute; left: 50%; top: 50%; width: 25%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 30%; background: var(--kd2-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 16px rgba(var(--kd2-lilac-rgb), .10), 0 0 0 34px rgba(var(--kd2-lilac-rgb), .06), 0 30px 70px rgba(var(--kd2-violet-rgb), .28); }
body.kd-social .kd2-eco__core::after { content: ''; position: absolute; inset: -6px; border-radius: 32%; border: 2px solid rgba(var(--kd2-magenta-rgb), .35); animation: kd2-halo 3.6s ease-out infinite; }
@keyframes kd2-halo { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.45); opacity: 0; } }
body.kd-social .kd2-eco__core img { display: block; width: 58%; height: auto; }
body.kd-social .kd2-eco__node { position: absolute; z-index: 2; width: 150px; padding: 0; transform: translate(-50%, -36px); display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; cursor: pointer; color: var(--kd2-ink); font-weight: 600; font-size: 16px; line-height: 1.25; }
body.kd-social .kd2-eco__node--0 { left: 50%; top: 14%; }
body.kd-social .kd2-eco__node--1 { left: 81.2%; top: 32%; }
body.kd-social .kd2-eco__node--2 { left: 81.2%; top: 68%; }
body.kd-social .kd2-eco__node--3 { left: 50%; top: 86%; }
body.kd-social .kd2-eco__node--4 { left: 18.8%; top: 68%; }
body.kd-social .kd2-eco__node--5 { left: 18.8%; top: 32%; }
body.kd-social .kd2-eco__tile { width: 72px; height: 72px; border-radius: 22px; background: var(--kd2-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(var(--kd2-violet-rgb), .14); border: 2px solid transparent; transition: transform .3s, box-shadow .3s, border-color .3s; }
body.kd-social .kd2-eco__tile--sky { color: var(--kd2-sky-d); }
body.kd-social .kd2-eco__tile--magenta { color: var(--kd2-magenta-d); }
body.kd-social .kd2-eco__tile--sun { color: var(--kd2-sun-dd); }
body.kd-social .kd2-eco__tile--mint { color: var(--kd2-mint-d); }
body.kd-social .kd2-eco__tile--lilac { color: var(--kd2-violet); }
body.kd-social .kd2-eco__tile--teal { color: var(--kd2-teal); }
body.kd-social .kd2-eco__node:hover .kd2-eco__tile { transform: translateY(-4px) scale(1.05); box-shadow: 0 18px 36px rgba(var(--kd2-violet-rgb), .22); }
body.kd-social .kd2-eco__node.is-on .kd2-eco__tile { border-color: var(--kd2-violet); box-shadow: 0 0 0 7px rgba(var(--kd2-violet-rgb), .12), 0 18px 40px rgba(var(--kd2-violet-rgb), .28); }
body.kd-social .kd2-eco__cap { max-width: 440px; margin: 6px auto 0; padding: 20px 26px; border-radius: 22px; background: var(--kd2-white); border: 1px solid var(--kd2-line); box-shadow: 0 24px 50px rgba(var(--kd2-violet-rgb), .14); text-align: center; font-size: 18px; line-height: 1.5; color: var(--kd2-text); }
body.kd-social .kd2-eco__cap strong { color: var(--kd2-ink); }

/* ---------- 5 why it matters ---------- */
body.kd-social .kd2-why-card { margin-top: 110px; padding: 56px 60px 44px; background: var(--kd2-white); border-radius: 26px; border: 1px solid var(--kd2-line2); box-shadow: 0 1px 2px rgba(var(--kd2-ink-rgb), .04), 0 12px 30px rgba(var(--kd2-violet-rgb), .06); transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s; }
body.kd-social .kd2-why-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(var(--kd2-ink-rgb), .05), 0 30px 60px rgba(var(--kd2-violet-rgb), .16); }
body.kd-social .kd2-why-card__grid { gap: 56px; align-items: center; }
body.kd-social .kd2-why-card__pic { display: flex; justify-content: center; }
body.kd-social .kd2-why-card__round { max-width: 320px; border-radius: 50%; filter: drop-shadow(0 30px 44px rgba(var(--kd2-teal-rgb), .22)); }
body.kd-social .kd2-why-card__round img { display: block; width: 100%; aspect-ratio: 1 / 1; }
body.kd-social .kd2-why-card__title { margin-top: 18px; font-size: clamp(32px, 3.4vw, 50px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
body.kd-social .kd2-why-card__text { margin-top: 18px; max-width: 620px; font-size: 18px; line-height: 1.6; color: var(--kd2-text); }
body.kd-social .kd2-why-card__act { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 22px; }
body.kd-social .kd2-why-card__help { font-size: 14px; color: var(--kd2-text4); }
body.kd-social .kd2 .kd2-why-card__help a { color: var(--kd2-ink); font-weight: 700; }
body.kd-social .kd2-why-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--kd2-line2); }
body.kd-social .kd2-why-stat { padding: 4px 32px; border-left: 1px solid var(--kd2-line2); }
body.kd-social .kd2-why-stat:first-child { border-left: 0; padding-left: 0; }
body.kd-social .kd2-why-stat__num { font-size: 38px; }
body.kd-social .kd2-why-stat p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--kd2-text2); }
body.kd-social .kd2-why-stat__src { margin-top: 8px; font-size: 14px; color: var(--kd2-text5); }
body.kd-social .kd2-why-stat blockquote { margin-top: 8px; padding: 0; border: 0; font-size: 19px; line-height: 1.35; font-weight: 500; color: var(--kd2-ink); }

/* ---------- 6 features & tools ---------- */
body.kd-social .kd2-tools { position: relative; overflow: hidden; padding: 20px 0 130px; background: var(--kd2-lav5); color: var(--kd2-ink); }
body.kd-social .kd2-tools__intro { max-width: 760px; }
body.kd-social .kd2-tools__title { margin-top: 18px; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
body.kd-social .kd2-tools__text { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--kd2-text); }
body.kd-social .kd2-tools__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
/* the tool card itself (.kd2-tool) is css/tools.css: the Features & Tools page draws the same card */
body.kd-social .kd2-tools__foot { margin-top: 26px; text-align: center; font-size: 14px; letter-spacing: .14em; color: var(--kd2-text5); text-transform: uppercase; }

/* ---------- 7 mindful kindness ---------- */
body.kd-social .kd2-mindful { position: relative; overflow: hidden; padding: 140px 0; background: var(--kd2-ink2); }
body.kd-social .kd2-mindful__blob { width: 520px; height: 520px; background: var(--kd2-lilac); top: 10%; right: -160px; opacity: .3; }
body.kd-social .kd2-mindful__grid { gap: 64px; align-items: center; }
body.kd-social .kd2-mindful__pic { border-radius: 36px; aspect-ratio: 4 / 5; box-shadow: 0 40px 90px rgba(var(--kd2-black-rgb), .45); }
body.kd-social .kd2-mindful__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% center; }
body.kd-social .kd2-mindful__badge { position: absolute; right: -28px; bottom: -28px; max-width: 290px; padding: 24px 26px; border-radius: 26px; background: var(--kd2-sun); color: var(--kd2-ink); box-shadow: 0 30px 60px rgba(var(--kd2-black-rgb), .4); }
body.kd-social .kd2-mindful__badge-k { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
body.kd-social .kd2-mindful__badge-n { margin-top: 12px; font-size: 48px; }
body.kd-social .kd2-mindful__badge-t { margin-top: 4px; font-size: 14px; color: var(--kd2-brown); }
body.kd-social .kd2-mindful__title { margin-top: 20px; font-size: clamp(38px, 4.4vw, 64px); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; color: var(--kd2-on); }
body.kd-social .kd2-mindful__text { margin-top: 24px; font-size: 18px; line-height: 1.65; color: var(--kd2-soft); }
body.kd-social .kd2-mindful__pills { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
body.kd-social .kd2-mindful__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
body.kd-social .kd2-pill { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: rgba(var(--kd2-white-rgb), .05); border: 1px solid rgba(var(--kd2-white-rgb), .1); transition: transform .3s, background .3s, box-shadow .3s; }
body.kd-social .kd2-pill:hover { transform: translateX(8px); background: rgba(var(--kd2-white-rgb), .09); box-shadow: 0 18px 40px rgba(var(--kd2-black-rgb), .3); }
body.kd-social .kd2-pill__ic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; }
body.kd-social .kd2-pill__ic--magenta { background: rgba(var(--kd2-magenta-rgb), .18); color: var(--kd2-pink); }
body.kd-social .kd2-pill__ic--sky { background: rgba(var(--kd2-sky-rgb), .18); color: var(--kd2-sky2); }
body.kd-social .kd2-pill__ic--sun { background: rgba(var(--kd2-sun-rgb), .18); color: var(--kd2-sun2); }
body.kd-social .kd2-pill__title { font-weight: 600; font-size: 18px; color: var(--kd2-on); }
body.kd-social .kd2-pill__text { font-size: 14px; color: var(--kd2-muted); }

/* ---------- 8 our initiatives: four arenas ---------- */
body.kd-social .kd2-init { padding: 140px 0; background: var(--kd2-lav3); color: var(--kd2-ink); }
body.kd-social .kd2-init__head { margin-bottom: 48px; }
body.kd-social .kd2-init__title { margin-top: 20px; font-size: clamp(38px, 4.4vw, 64px); line-height: 1; letter-spacing: -.03em; font-weight: 700; }
body.kd-social .kd2-acc-row { display: flex; gap: 16px; height: 560px; }
body.kd-social .kd2-acc { --kd2-acc: var(--kd2-sky3); position: relative; flex: 1 1 0; min-width: 0; border-radius: 30px; overflow: hidden; background: var(--kd2-ink); color: var(--kd2-white); box-shadow: 0 10px 30px rgba(var(--kd2-ink-rgb), .12); transition: flex .7s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
body.kd-social .kd2-acc--pink { --kd2-acc: var(--kd2-pink); }
body.kd-social .kd2-acc--sun2 { --kd2-acc: var(--kd2-sun2); }
body.kd-social .kd2-acc--mint2 { --kd2-acc: var(--kd2-mint2); }
body.kd-social .kd2-acc.is-on { flex: 3.4 1 0; box-shadow: 0 30px 70px rgba(var(--kd2-ink-rgb), .3); }
body.kd-social .kd2-acc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.75); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), filter .6s; }
body.kd-social .kd2-acc.is-on .kd2-acc__img { filter: none; transform: scale(1.04); }
body.kd-social .kd2-acc__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--kd2-ink-rgb), .05) 20%, rgba(var(--kd2-ink-rgb), .9) 100%); }
body.kd-social .kd2-acc__hit { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; background: transparent; border: 0; cursor: pointer; border-radius: inherit; }
body.kd-social .kd2-acc__top { position: absolute; top: 24px; left: 24px; right: 24px; z-index: 2; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--kd2-white); pointer-events: none; }
body.kd-social .kd2-acc__top .kd2-mono { opacity: .85; }
body.kd-social .kd2-acc__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--kd2-acc); box-shadow: 0 0 0 6px rgba(var(--kd2-white-rgb), .12); }
body.kd-social .kd2-acc__foot { position: absolute; left: 28px; right: 28px; bottom: 28px; z-index: 2; pointer-events: none; }
body.kd-social .kd2-acc__kicker { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--kd2-acc); }
body.kd-social .kd2-acc__title { margin-top: 6px; font-family: var(--kd2-display); font-weight: 600; font-size: 26px; line-height: 1.1; white-space: nowrap; }
body.kd-social .kd2-acc.is-on .kd2-acc__title { font-size: 40px; }
/* a closed arena's words take no room, so its name sits at the foot of the picture like the open one's */
body.kd-social .kd2-acc__body { max-width: 460px; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(18px); transition: opacity .45s .15s, transform .45s .15s; }
body.kd-social .kd2-acc.is-on .kd2-acc__body { max-height: 320px; overflow: visible; opacity: 1; transform: none; }
body.kd-social .kd2-acc__body p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--kd2-on2); }
body.kd-social .kd2-acc__body .kd2-btn { margin-top: 20px; }
body.kd-social .kd2-acc.is-on .kd2-acc__body .kd2-btn { pointer-events: auto; }
body.kd-social .kd2-init__eac { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 22px 28px; }
body.kd-social .kd2-init__eac-text { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--kd2-text2); }
body.kd-social .kd2-init__eac-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; }

/* ---------- 9 the content hub ---------- */
/* the Townsquare's rows (feed_rows, ts_card) in this design's colours (the windows: css/chrome.css) */
body.kd-social .kd2-hub {
    --tq-skin-blue: var(--kd2-violet); --tq-skin-navy: var(--kd2-ink); --tq-blue: var(--kd2-violet); --tq-navy: var(--kd2-ink); --tq-ink: var(--kd2-ink);
    --tq-yellow: var(--kd2-sun); --tq-white: var(--kd2-white); --tq-text: var(--kd2-ink); --tq-soft: var(--kd2-text); --tq-muted: var(--kd2-text5);
    --tq-line: var(--kd2-line); --tq-line-hi: rgba(var(--kd2-sun-rgb), .55); --tq-cyan: var(--kd2-sky); --tq-danger: var(--kd2-danger);
    --tq-display: var(--kd2-display); --tq-body: var(--kd2-body); --tq-mono: var(--kd2-mono);
    --tq-rest: 0 1px 2px rgba(var(--kd2-ink-rgb), .04); --tq-lift: 0 22px 50px rgba(var(--kd2-violet-rgb), .14); }
body.kd-social .kd2-hub { padding: 120px 0 140px; background: var(--kd2-lav); color: var(--kd2-ink); }
body.kd-social .kd2-hub a { color: var(--kd2-ink); }
body.kd-social .kd2-live { display: inline-flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 999px; background: var(--kd2-rose-bg); border: 1px solid var(--kd2-rose-line); font-size: 14px; letter-spacing: .14em; color: var(--kd2-rose); text-transform: uppercase; }
body.kd-social .kd2-live__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--kd2-hot); animation: kd2-ping 1.6s infinite; }
@keyframes kd2-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--kd2-hot-rgb), .7); } 100% { box-shadow: 0 0 0 12px rgba(var(--kd2-hot-rgb), 0); } }
body.kd-social .kd2-hub__title { margin-top: 22px; font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
body.kd-social .kd2-hub__top { gap: 24px; margin-top: 44px; }
body.kd-social .kd2 .kd2-feat { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 30px; color: var(--kd2-white); text-decoration: none; box-shadow: 0 30px 70px rgba(var(--kd2-ink-rgb), .25); }
body.kd-social .kd2 .kd2-feat:hover { color: var(--kd2-white); }
body.kd-social .kd2-feat[hidden] { display: none; }
body.kd-social .kd2-feat > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body.kd-social .kd2-feat > img.kd2-feat__img--right { object-position: 75% center; }
body.kd-social .kd2-feat__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--kd2-shade-rgb), 0) 30%, rgba(var(--kd2-shade-rgb), .92) 100%); }
body.kd-social .kd2-feat__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -62%); }
body.kd-social .kd2-feat:hover .kd2-play { transform: scale(1.08); box-shadow: 0 0 0 20px rgba(var(--kd2-white-rgb), .14); }
body.kd-social .kd2-feat__body { position: absolute; left: 36px; right: 36px; bottom: 32px; display: block; }
body.kd-social .kd2-feat__tags { display: flex; flex-wrap: wrap; gap: 8px; }
body.kd-social .kd2-feat__tag { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(var(--kd2-white-rgb), .18); color: var(--kd2-white); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(8px); }
body.kd-social .kd2-feat__tag--sun { background: var(--kd2-sun); color: var(--kd2-ink); }
body.kd-social .kd2-feat__title { display: block; max-width: 720px; margin-top: 14px; font-size: clamp(26px, 3vw, 44px); line-height: 1.04; letter-spacing: -.025em; font-weight: 600; }
body.kd-social .kd2-feat__text { display: block; max-width: 620px; margin-top: 10px; font-size: 16px; color: var(--kd2-on4); }
body.kd-social .kd2-feat-row { display: flex; gap: 12px; margin-top: 14px; }
body.kd-social .kd2-feat-thumb { flex: 1 1 0; min-width: 0; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: var(--kd2-white); border: 1px solid var(--kd2-line); cursor: pointer; text-align: left; color: var(--kd2-ink); transition: .3s; }
body.kd-social .kd2-feat-thumb:hover { box-shadow: 0 14px 30px rgba(var(--kd2-violet-rgb), .14); transform: translateY(-2px); }
body.kd-social .kd2-feat-thumb.is-on { border-color: var(--kd2-violet); box-shadow: 0 0 0 2px rgba(var(--kd2-violet-rgb), .25); }
body.kd-social .kd2-feat-thumb img { width: 64px; height: 64px; flex: none; border-radius: 12px; object-fit: cover; }
body.kd-social .kd2-feat-thumb__kind { display: block; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--kd2-violet); }
body.kd-social .kd2-feat-thumb__title { display: block; margin-top: 4px; font-weight: 600; font-size: 15px; line-height: 1.25; }
body.kd-social .kd2-trend { padding: 26px 26px 14px; }
body.kd-social .kd2-side__head { display: flex; align-items: center; justify-content: space-between; }
body.kd-social .kd2 .kd2-side__all { font-size: 14px; color: var(--kd2-violet); font-weight: 600; text-decoration: none; }
body.kd-social .kd2 .kd2-side__all:hover { color: var(--kd2-violet-deep); }
body.kd-social .kd2-trend__title { font-size: 22px; font-weight: 600; }
body.kd-social .kd2-trend__list { margin-top: 12px; }
body.kd-social .kd2 .kd2-side-row { display: flex; gap: 14px; align-items: center; padding: 12px; margin: 0 -12px; border-radius: 14px; text-decoration: none; color: var(--kd2-ink); transition: background .2s, transform .2s; }
body.kd-social .kd2 .kd2-side-row:hover { background: var(--kd2-lav2); color: var(--kd2-ink); transform: translateX(4px); }
body.kd-social .kd2-trend__rank { width: 34px; flex: none; text-align: center; font-size: 26px; font-weight: 700; color: var(--kd2-violet); }
body.kd-social .kd2-trend__t { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--kd2-ink); }
body.kd-social .kd2-trend__k { display: block; margin-top: 4px; font-size: 14px; color: var(--kd2-text5); }
body.kd-social .kd2-tabs { display: flex; flex-wrap: wrap; margin-top: 56px; border-bottom: 1px solid var(--kd2-line3); }
body.kd-social .kd2-tab { margin-right: 22px; padding: 12px 2px; background: none; border: 0; border-bottom: 2.5px solid transparent; font-size: 16px; font-weight: 500; color: var(--kd2-text3); cursor: pointer; white-space: nowrap; transition: color .2s, border-color .2s; }
body.kd-social .kd2-tab:hover { color: var(--kd2-violet); }
body.kd-social .kd2-tab.is-on { color: var(--kd2-violet); border-bottom-color: var(--kd2-violet); }
body.kd-social .kd2-tab__n { margin-left: 4px; font-size: 14px; color: var(--kd2-faint); }
body.kd-social .kd2-hub.is-loading .kd2-rows { opacity: .5; }
body.kd-social .kd2-hub__main { gap: 28px; margin-top: 28px; }
body.kd-social .kd2-hub__feed { display: flex; flex-direction: column; gap: 18px; }
body.kd-social .kd2-hub__tools { padding: 18px; }
body.kd-social .kd2-hub__bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
body.kd-social .kd2-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--kd2-lav); }
body.kd-social .kd2-seg__b { min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font-size: 15px; font-weight: 500; color: var(--kd2-text3); cursor: pointer; transition: .2s; }
body.kd-social .kd2-seg__b:hover { background: var(--kd2-white); color: var(--kd2-ink); }
body.kd-social .kd2-seg__b.is-on, body.kd-social .kd2-seg__b.is-on:hover { background: var(--kd2-violet); color: var(--kd2-white); }
body.kd-social .kd2-search { flex: 1 1 220px; max-width: 320px; display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 16px; border-radius: 999px; background: var(--kd2-amber-bg); border: 1px solid var(--kd2-amber-line); color: var(--kd2-amber); font-size: 15px; font-weight: 500; }
body.kd-social .kd2-search input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; outline: none; box-shadow: none; font-family: inherit; font-size: 15px; color: var(--kd2-ink); }
body.kd-social .kd2-search input::placeholder { color: var(--kd2-amber); opacity: .8; }
body.kd-social .kd2-hub__count { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: var(--kd2-lav2); border-left: 3px solid var(--kd2-violet); font-size: 15px; color: var(--kd2-text2); }
body.kd-social .kd2-hub__count strong { color: var(--kd2-violet); }
body.kd-social .kd2-compose { padding: 20px; border-color: var(--kd2-amber-line2); background: linear-gradient(180deg, var(--kd2-cream), var(--kd2-white)); }
body.kd-social .kd2-compose__top { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
body.kd-social .kd2-compose__who { display: flex; gap: 14px; align-items: center; min-width: 0; }
body.kd-social .kd2-compose__you { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--kd2-sun); color: var(--kd2-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; }
body.kd-social .kd2-compose__title { font-weight: 700; font-size: 17px; }
body.kd-social .kd2-compose__text { margin-top: 2px; font-size: 14px; color: var(--kd2-text4); }
body.kd-social .kd2-compose__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body.kd-social .kd2 .kd2-act { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--kd2-white); border: 1px solid var(--kd2-line4); font-size: 14px; font-weight: 500; color: var(--kd2-text2); text-decoration: none; cursor: pointer; transition: .2s; }
body.kd-social .kd2 .kd2-act:hover { border-color: var(--kd2-violet); color: var(--kd2-violet); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(var(--kd2-violet-rgb), .12); }
/* the rows: the Townsquare's own (townsquare.css .tq-post), on this design's white panels */
body.kd-social .kd2-rows > .tq-post { border-radius: 22px; border: 1px solid var(--kd2-line); background: var(--kd2-white); box-shadow: var(--tq-rest); }
body.kd-social .kd2-rows > .tq-post:hover { box-shadow: 0 2px 4px rgba(var(--kd2-ink-rgb), .04), var(--tq-lift); }
body.kd-social .kd2-rows .tq-post h3 { margin: 0 0 8px; font-family: var(--kd2-display); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -.015em; color: var(--kd2-ink); }
body.kd-social .kd2-rows .tq-crumbs a { color: var(--kd2-violet); }
body.kd-social .kd2-more { display: flex; justify-content: center; margin-top: 6px; }
body.kd-social .kd2-empty { padding: 48px 32px; text-align: center; border-style: dashed; }
body.kd-social .kd2-empty__title { font-size: 24px; font-weight: 600; }
body.kd-social .kd2-empty p { margin-top: 10px; color: var(--kd2-text4); }
body.kd-social .kd2-empty__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }

/* ---------- 9c the sidebar ---------- */
body.kd-social .kd2-side { display: flex; flex-direction: column; gap: 18px; }
body.kd-social .kd2-join { position: relative; overflow: hidden; padding: 28px; border-radius: 24px; color: var(--kd2-white); background: radial-gradient(120% 120% at 100% 0%, var(--kd2-magenta) 0%, var(--kd2-violet) 45%, var(--kd2-deep) 100%); box-shadow: 0 24px 60px rgba(var(--kd2-violet-rgb), .35); }
body.kd-social .kd2-join__mark { position: absolute; right: -40px; bottom: -40px; width: 200px; opacity: .18; }
body.kd-social .kd2-join__k { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--kd2-sun2); }
body.kd-social .kd2-join__title { margin-top: 12px; font-size: 28px; line-height: 1.1; font-weight: 700; }
body.kd-social .kd2-join__list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; font-size: 15px; color: var(--kd2-on5); }
body.kd-social .kd2-join__list span { display: flex; gap: 10px; align-items: center; }
body.kd-social .kd2-join__list .kd2-i { color: var(--kd2-sun2); }
body.kd-social .kd2-join__btns { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
body.kd-social .kd2-side__box { padding: 24px 24px 12px; }
body.kd-social .kd2-side__title { font-size: 20px; font-weight: 600; }
body.kd-social .kd2-side__list { margin-top: 8px; }
body.kd-social .kd2-side__none { margin: 8px 0 12px; font-size: 15px; color: var(--kd2-text5); }
body.kd-social .kd2-date { width: 54px; flex: none; padding: 8px 0; border-radius: 12px; background: var(--kd2-lav); text-align: center; font-family: var(--kd2-mono); color: var(--kd2-violet); }
body.kd-social .kd2-date span { display: block; font-size: 14px; }
body.kd-social .kd2-date b { display: block; font-size: 18px; font-weight: 600; }
body.kd-social .kd2-side-row__t { font-weight: 600; font-size: 15px; color: var(--kd2-ink); }
body.kd-social .kd2-side-row__s { display: block; margin-top: 2px; font-weight: 400; font-size: 14px; color: var(--kd2-text5); }
body.kd-social .kd2-side-row__img { width: 54px; height: 54px; flex: none; border-radius: 12px; object-fit: cover; }
body.kd-social .kd2-side-row__img--sm { width: 46px; height: 46px; }
body.kd-social .kd2-side__fig { display: flex; gap: 14px; align-items: center; padding: 14px 0 6px; }
body.kd-social .kd2-side__fig .kd2-stat-num { font-size: 40px; }
body.kd-social .kd2-side__fig span + span { font-size: 14px; line-height: 1.4; color: var(--kd2-text); }
body.kd-social .kd2-brief { padding: 26px; border-radius: 24px; background: var(--kd2-sun); color: var(--kd2-ink); box-shadow: 0 20px 50px rgba(var(--kd2-sun-rgb), .3); }
body.kd-social .kd2-brief__title { font-size: 22px; font-weight: 700; line-height: 1.15; }
body.kd-social .kd2-brief p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--kd2-brown); }
body.kd-social .kd2 .kd2-brief .kd2-btn { width: 100%; margin-top: 16px; }

/* ---------- 10 it takes a village ---------- */
body.kd-social .kd2-village { overflow: hidden; padding: 120px 0 110px; background: var(--kd2-white); color: var(--kd2-ink); }
body.kd-social .kd2-village__head { margin-bottom: 28px; }
body.kd-social .kd2-village__title { margin-top: 18px; font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -.03em; font-weight: 700; }
body.kd-social .kd2-village__text { margin-top: 14px; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--kd2-text); }
body.kd-social .kd2-village__nav { display: flex; align-items: center; gap: 6px; }
body.kd-social .kd2-village__prev { margin-left: 8px; }
body.kd-social .kd2-eng-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 10px 40px 50px; margin: 0 -40px -40px; scroll-padding: 0 40px; /* room for the cards' shadow, which the scroller would cut */ }
body.kd-social .kd2-eng-track::-webkit-scrollbar { display: none; }
body.kd-social .kd2-eng { position: relative; flex: 0 0 min(1160px, 88%); scroll-snap-align: start; min-height: 540px; display: flex; align-items: center; overflow: hidden; border-radius: 40px; background: var(--kd2-ink); color: var(--kd2-white); box-shadow: 0 16px 36px rgba(var(--kd2-ink-rgb), .16); transition: box-shadow .5s; }
body.kd-social .kd2-eng:hover { box-shadow: 0 18px 40px rgba(var(--kd2-ink-rgb), .26); }
body.kd-social .kd2-eng__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
body.kd-social .kd2-eng__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--kd2-ink-rgb), .96) 0%, rgba(var(--kd2-ink-rgb), .86) 40%, rgba(var(--kd2-ink-rgb), 0) 72%); }
body.kd-social .kd2-eng__body { position: relative; max-width: 640px; padding: 60px; }
body.kd-social .kd2-eng__title { margin-top: 20px; font-size: clamp(38px, 4.6vw, 68px); line-height: .98; letter-spacing: -.035em; font-weight: 700; }
body.kd-social .kd2-eng__text { margin-top: 22px; font-size: 18px; line-height: 1.6; color: var(--kd2-on3); }
body.kd-social .kd2-eng__body .kd2-btn { margin-top: 32px; }


/* ---------- widths ---------- */
@media (max-width: 1280px) {
    /* a closed arena is narrow here: its whole name still shows */
    body.kd-social .kd2-acc:not(.is-on) .kd2-acc__foot { left: 18px; right: 18px; }
    body.kd-social .kd2-acc:not(.is-on) .kd2-acc__title { font-size: 18px; white-space: normal; }
}
@media (max-width: 1100px) {
    body.kd-social .kd2-stats__head { padding: 16px 18px; }
    body.kd-social .kd2-stats__cell { gap: 10px; padding: 16px 16px; }
    body.kd-social .kd2-stats__num { font-size: 28px; }
}
@media (max-width: 900px) {
    body.kd-social .kd2-stats__head, body.kd-social .kd2-stats__cell { border-right: 0; border-top: 1px solid rgba(var(--kd2-white-rgb), .1); }
    body.kd-social .kd2-stats__head { border-top: 0; }
    body.kd-social .kd2-stats__label { max-width: none; }
    body.kd-social .kd2-eco__node { width: 96px; font-size: 14px; transform: translate(-50%, -27px); }
    body.kd-social .kd2-eco__tile { width: 54px; height: 54px; border-radius: 16px; }
    body.kd-social .kd2-why-card { padding: 40px 24px 32px; }
    body.kd-social .kd2-why-stat, body.kd-social .kd2-why-stat:first-child { border-left: 0; padding: 18px 0; border-top: 1px solid var(--kd2-line2); }
    body.kd-social .kd2-why-stat:first-child { border-top: 0; }
    body.kd-social .kd2-mindful__badge { right: -8px; bottom: -20px; }
    body.kd-social .kd2-acc-row { flex-direction: column; height: auto; }
    body.kd-social .kd2-acc { flex: none !important; height: 300px; }
    body.kd-social .kd2-acc.is-on { height: 420px; }
    body.kd-social .kd2-acc__title, body.kd-social .kd2-acc.is-on .kd2-acc__title, body.kd-social .kd2-acc:not(.is-on) .kd2-acc__title { font-size: 28px; white-space: normal; }
    body.kd-social .kd2-acc:not(.is-on) .kd2-acc__foot { left: 28px; right: 28px; }
    body.kd-social .kd2-feat-row { flex-direction: column; }
    body.kd-social .kd2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    body.kd-social .kd2-tabs::-webkit-scrollbar { display: none; }
    body.kd-social .kd2-eng { flex-basis: 92%; min-height: 600px; align-items: flex-end; }
    body.kd-social .kd2-eng-track { padding-left: 20px; padding-right: 20px; margin-left: -20px; margin-right: -20px; scroll-padding: 0 20px; }
}
@media (max-width: 600px) {
    body.kd-social .kd2-hero { padding-top: 56px; }
    body.kd-social .kd2-slider { height: 560px; }
    body.kd-social .kd2-slide__body { left: 20px; right: 20px; }
    body.kd-social .kd2-slide__title { font-size: 26px; }
    body.kd-social .kd2-why, body.kd-social .kd2-mindful, body.kd-social .kd2-init { padding: 90px 0; }
    body.kd-social .kd2-hub { padding: 90px 0 100px; }
    body.kd-social .kd2-village { padding: 90px 0 80px; }
    body.kd-social .kd2 .kd2-feat { aspect-ratio: 3 / 4; }
    body.kd-social .kd2-feat__body { left: 22px; right: 22px; bottom: 22px; }
    body.kd-social .kd2-eng__body { padding: 32px 24px; }
    body.kd-social .kd2-search { max-width: none; }
    body.kd-social .kd2-seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
    body.kd-social .kd2-seg::-webkit-scrollbar { display: none; }
    body.kd-social .kd2-seg__b { flex: none; }
}
/* the post box's type chips (townsquare ts_composer) drawn EXACTLY as the design's .act chips (Main.dc.html):
   white pill, 1px line, 14px/500 words, violet border + words on hover. The Townsquare-only "News >" link is not in the design. */
body.kd-social .tq-composer .tq-ctypes { gap: 8px; }
body.kd-social .tq-composer .tq-ctype { display: inline-flex; align-items: center; gap: 8px; min-height: 44px !important; padding: 0 16px !important; border-radius: 999px !important; background: var(--kd2-white); border: 1px solid var(--kd2-line4) !important; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--kd2-text2); text-decoration: none !important; box-shadow: none; transition: .2s; }
body.kd-social .tq-composer .tq-ctype svg { width: 16px; height: 16px; color: currentColor; }
body.kd-social .tq-composer .tq-ctype:is(:hover, :focus-visible) { border-color: var(--kd2-violet) !important; color: var(--kd2-violet); background: var(--kd2-white); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(var(--kd2-violet-rgb, 106, 63, 193), .12); }
body.kd-social .tq-composer .tq-ctype[aria-checked="true"] { border-color: var(--kd2-violet) !important; color: var(--kd2-violet); background: var(--kd2-white); }
body.kd-social .kd2 .kd2-act, body.kd-social .kd2 .kd2-act:is(:hover, :focus, :visited) { text-decoration: none !important; }
/* the post box's last row (ts_post_body .tq-crow): Add a picture, the Content Studio link and the Post button on one
   centred row, all 44px, 12px apart, Post at the right end; it wraps cleanly on a phone (townsquare.css's phone grid undone).
   Post (and the master's menu button) is the design's violet pill (kd2-btn--violet); the studio link a plain violet link. */
body.kd-social .tq-composer .tq-crow.tq-crow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
body.kd-social .tq-composer .tq-ctools.tq-ctools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; min-width: 0; }
body.kd-social .tq-composer .tq-crow .tq-pic:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
body.kd-social .tq-composer .tq-crow .tq-pic-prev { grid-column: auto; grid-row: auto; }
body.kd-social .tq-composer .tq-pic-btn.tq-pic-btn { grid-column: auto; grid-row: auto; display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; height: 44px; margin: 0; line-height: 1.2; padding: 0 18px; gap: 8px; border-radius: 999px; border: 1.5px dashed var(--kd2-violet); background: var(--kd2-lav2); color: var(--kd2-violet); font-family: inherit; font-size: 14px; font-weight: 600; }
body.kd-social .tq-composer .tq-pic-btn.tq-pic-btn:hover { background: var(--kd2-violet); color: var(--kd2-white); }
body.kd-social .tq-composer .tq-pic-btn svg { width: 16px; height: 16px; }
body.kd-social .tq-composer .tq-cmore, body.kd-social .tq-composer .tq-cmore:is(:hover, :focus, :visited) { grid-column: auto; grid-row: auto; display: inline-flex; align-items: center; min-height: 44px; margin: 0; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--kd2-violet); text-decoration: none !important; }
body.kd-social .tq-composer .tq-cmore:hover { color: var(--kd2-ink); }
body.kd-social .tq-composer .tq-postto { grid-column: auto; grid-row: auto; }
body.kd-social .tq-composer .tq-postto select { min-height: 44px; border-radius: 999px; font-family: inherit; }
body.kd-social .tq-composer .tq-crow > .tq-scope { margin-left: auto; grid-column: auto; grid-row: auto; }
body.kd-social .tq-composer .tq-crow .tq-btn-blue { grid-column: auto; grid-row: auto; width: auto; min-height: 44px; height: 44px; margin-left: auto; padding: 0 22px; gap: 8px; border: 0; border-radius: 999px; background: var(--kd2-violet); color: var(--kd2-white); font-family: inherit; font-size: 14px; font-weight: 600; box-shadow: none; }
body.kd-social .tq-composer .tq-crow .tq-btn-blue:hover { background: var(--kd2-violet); color: var(--kd2-white); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(var(--kd2-violet-rgb), .45); }
/* the opened post (feed "Read more": ajax_post_detail in .tq-full-body): pictures and videos keep their own shape,
   capped at the card's width (owner's rule, as on the Townsquare) - the .kd2 img max-width reset must not stretch them */
body.kd-social .kd2 .tq-full-body img { max-width: 100% !important; height: auto !important; object-fit: contain; }
body.kd-social .kd2 .tq-full-body .splide__slide img, body.kd-social .kd2 .tq-full-body a.popup-youtube > img { width: auto !important; max-width: 100% !important; max-height: 70vh; margin: 0 auto; }
body.kd-social .kd2 .tq-full-body iframe, body.kd-social .kd2 .tq-full-body video { width: 100%; height: auto; aspect-ratio: 16 / 9; }