/* Clean Arcade, Brand and Social Media (v4.33.0): the hero with jump links,
   the CA Brand Family tree and cards (about.css), the Original seal, the
   official channels and our promise on social media. */

#family, #seal, #follow, #promise { scroll-margin-top: 80px; }

/* hero */
.bs-lede { margin: 0 0 18px; max-width: none; font-size: clamp(17px, 2.2vw, 21px); font-weight: 600; line-height: 1.55; color: var(--color-text); }
.bs-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.bs-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  text-decoration: none; color: var(--color-text); border: 1px solid color-mix(in srgb, var(--tint) 55%, transparent);
  background: color-mix(in srgb, var(--tint) 10%, transparent); transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.bs-jump a:hover { background: color-mix(in srgb, var(--tint) 20%, transparent); box-shadow: 0 0 18px -8px var(--tint); transform: translateY(-1px); }
.bs-jump a:focus-visible { outline: 2px solid var(--tint); outline-offset: 2px; }

/* the family tree: master brand, its two children, the houses CA STUDIO leads */
.bs-tree { --line: color-mix(in srgb, var(--n-magenta) 55%, var(--n-cyan)); margin: 8px 0 26px; }
.bs-root { position: relative; display: flex; justify-content: center; padding-bottom: 28px; }
.bs-root::after { content: ""; position: absolute; bottom: 0; left: 50%; width: 2px; height: 28px; margin-left: -1px; background: var(--line); opacity: .7; }
.bs-kids { position: relative; display: grid; grid-template-columns: var(--gtc, repeat(var(--cols, 2), minmax(0, 1fr))); gap: 0 18px; }
.bs-kids::before { content: ""; position: absolute; top: 0; left: var(--bar-l, var(--bar, 25%)); right: var(--bar-r, var(--bar, 25%)); height: 2px; background: var(--line); opacity: .7; }
.bs-branch { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 26px; }
.bs-branch::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 26px; margin-left: -1px; background: var(--line); opacity: .7; }
.bs-node { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 20px 14px; border-radius: 20px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--tint) 50%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 14%, transparent), color-mix(in srgb, var(--tint) 4%, transparent));
  box-shadow: 0 0 28px -18px var(--tint); }
.bs-node .ab-brand { margin: -6px; }
.bs-master .ab-mark img { height: clamp(40px, 6vw, 58px); width: auto; }
.bs-play .ab-mark img { height: clamp(34px, 4.6vw, 46px); width: auto; }
.bs-studio .ab-mark img { height: clamp(24px, 3.2vw, 32px); width: auto; }
.bs-role { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tint); }
:root[dir="rtl"] .bs-role, [dir="rtl"] .bs-role { letter-spacing: 0; }
.bs-leaves { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 14px; list-style: none;
  border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--n-magenta) 45%, transparent); }
.bs-leaves::before { content: ""; position: absolute; top: -26px; left: 50%; width: 2px; height: 26px; margin-left: -1px; background: var(--line); opacity: .7; }
.bs-leaves li { padding: 10px 12px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent); background: color-mix(in srgb, var(--tint) 8%, transparent); }
.bs-leaves .ab-mark img { height: 22px; width: auto; }
@media (max-width: 720px) {
  .bs-kids { grid-template-columns: 1fr; }
  .bs-kids::before { display: none; }
  .bs-branch + .bs-branch { padding-top: 22px; }
  .bs-branch + .bs-branch::before { height: 22px; }
}

/* the Original seal */
.bs-seal { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 18px 30px; align-items: center; padding: clamp(16px, 3vw, 26px);
  border-radius: 22px; border: 1px solid color-mix(in srgb, var(--n-cyan) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--n-cyan) 10%, transparent), color-mix(in srgb, var(--n-violet) 6%, transparent)); }
.bs-seal img { display: block; width: 100%; height: auto; border-radius: 50%; box-shadow: 0 0 34px -14px var(--n-cyan); }
.bs-seal p { margin: 0; font-size: 15.5px; line-height: 1.7; }
@media (max-width: 600px) { .bs-seal { grid-template-columns: 1fr; justify-items: center; text-align: center; } .bs-seal img { width: min(170px, 50vw); } }

/* Follow Us On: one card per official channel */
.bs-social { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.bs-so { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px; text-decoration: none; color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 13%, transparent), color-mix(in srgb, var(--tint) 3%, transparent) 70%);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.bs-so:hover { transform: translateY(-3px); border-color: var(--tint); box-shadow: 0 12px 30px -18px var(--tint); }
.bs-so:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }
.bs-so-top { display: flex; align-items: center; gap: 12px; }
.bs-so-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: var(--tint);
  background: color-mix(in srgb, var(--tint) 16%, transparent); border: 1px solid color-mix(in srgb, var(--tint) 40%, transparent); }
.bs-so-id { display: flex; flex-direction: column; min-width: 0; }
.bs-so-net { font-size: 17px; font-weight: 800; line-height: 1.2; }
.bs-so-handle { font-size: 13px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.bs-so-aud { align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--tint);
  border: 1px solid color-mix(in srgb, var(--tint) 50%, transparent); }
.bs-so-what { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 88%, transparent); }
.bs-so-go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 16px;
  border-radius: 999px; font-size: 14px; font-weight: 700; color: #100c1e; background: var(--tint); }
.bs-so-go .ab-go { width: 14px; height: 14px; }
[dir="rtl"] .bs-so-go .ab-go { transform: scaleX(-1); }
:root[data-theme="day"] .bs-so-go { color: #fff; }

/* our promise on social media */
.bs-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.bs-rules li { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--n-lime) 40%, transparent); background: color-mix(in srgb, var(--n-lime) 6%, transparent); }
.bs-rule-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--n-lime);
  background: color-mix(in srgb, var(--n-lime) 16%, transparent); }
.bs-rule-ico svg { width: 16px; height: 16px; }
.bs-rules p { margin: 0; font-size: 14.5px; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) { .bs-jump a, .bs-so { transition: none; } .bs-jump a:hover, .bs-so:hover { transform: none; } }

/* v4.37.0 a tree built in the control panel (Pages & menus › Brand tree):
   three levels, any number of boxes, each with its own logo size (--sz) */
.bs-lv0 .ab-mark img { height: calc(clamp(40px, 6vw, 58px) * var(--sz, 1)); width: auto; }
.bs-lv1 .ab-mark img { height: calc(clamp(26px, 3.6vw, 40px) * var(--sz, 1)); width: auto; }
.bs-leaves li .ab-mark img { height: calc(22px * var(--sz, 1)); width: auto; }
.bs-name { display: block; font-weight: 800; font-size: calc(17px * var(--sz, 1)); line-height: 1.2; color: var(--color-text); }
.bs-lv0 .bs-name { font-size: calc(26px * var(--sz, 1)); }
.bs-leaves .bs-name { font-size: calc(13px * var(--sz, 1)); letter-spacing: .04em; }
.ab-brand.bs-nolink { padding-inline-end: 6px; cursor: default; }
.ab-brand.bs-nolink:hover { background: none; box-shadow: none; }
.ab-mark .m-one { display: block; }
.bs-tree.ca-off { display: none; }
.bs-root.bs-solo::after { display: none; }

/* v4.39.0 every group of cards is one row of identical cards on a desktop (the
   houses, the channels, the promise), balanced rows of equal cards on a tablet,
   and one card per row on a phone */
#family .ab-houses, #follow .bs-social, #promise .bs-rules { display: grid; gap: 12px; grid-auto-rows: 1fr; }
@media (min-width: 1080px) {
  #family .ab-houses, #follow .bs-social, #promise .bs-rules { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
@media (min-width: 640px) and (max-width: 1079.98px) {
  #family .ab-houses, #follow .bs-social { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #promise .bs-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  #family .ab-houses, #follow .bs-social, #promise .bs-rules { grid-template-columns: minmax(0, 1fr); }
}
#family .ab-house, #follow .bs-so, #promise .bs-rules li { min-width: 0; box-sizing: border-box; height: 100%; }
#family .ab-house { display: flex; flex-direction: column; }
#family .ab-house .ab-brand { max-width: 100%; }
#family .ab-house .ab-mark img { width: auto; height: auto; max-width: 100%; max-height: 30px; }
#follow .bs-so-aud { max-width: 100%; }
/* v4.39.0 inside the tree too: the child-brand boxes share one width, and the
   houses are one row of identical chips (two per row on a phone) */
.bs-tree .bs-branch > .bs-node { width: min(100%, 280px); box-sizing: border-box; }
.bs-tree .bs-leaves { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; box-sizing: border-box; }
.bs-tree .bs-leaves li { display: flex; align-items: center; justify-content: center; min-width: 0; }
.bs-tree .bs-leaves li .ab-brand { max-width: 100%; padding-inline-end: 22px; }
.bs-tree .bs-leaves li .ab-mark img { max-width: 100%; }
@media (max-width: 720px) { .bs-tree .bs-leaves { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; } }

/* v4.39.0 the built-in tree: CA STUDIO's column is wider for its five houses */
.bs-kids:not([style]) { --gtc: minmax(0, 1fr) minmax(0, 2.5fr); --bar-l: 14.29%; --bar-r: 35.71%; }
#follow .bs-so-net, #follow .bs-so-handle { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ════ v4.40.0 less text, more brand ════════════════════════════════════
   CA PLAY: a centred lead card, its lockup large, one line under it.
   The houses: the CA mark large in the house colour, the house name in the
   site font (every house the same size), one short line. The channels: the
   icon, the full name, @cleanarcade and a centred Follow button. */
#family .bs-play-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: clamp(26px, 4vw, 40px) 20px;
  background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--n-cyan) 18%, transparent), transparent 62%), linear-gradient(160deg, color-mix(in srgb, var(--n-cyan) 9%, transparent), color-mix(in srgb, var(--n-magenta) 7%, transparent)); }
#family .bs-play-card .ab-brand { padding-inline-end: 34px; }
#family .bs-play-card .ab-mark img { width: clamp(220px, 32vw, 380px); height: auto; }
.bs-ptag { margin: 0 !important; font-size: clamp(16px, 1.8vw, 20px) !important; font-weight: 600; letter-spacing: .01em; color: var(--color-text); }

#family .bs-house { position: relative; padding: 0; border-radius: 22px; overflow: hidden; display: flex;
  border: 1px solid color-mix(in srgb, var(--tint) 45%, transparent);
  background: radial-gradient(120% 75% at 50% 0%, color-mix(in srgb, var(--tint) 24%, transparent), transparent 62%), linear-gradient(170deg, color-mix(in srgb, var(--tint) 10%, transparent), color-mix(in srgb, var(--tint) 3%, transparent));
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
#family .bs-house:hover { transform: translateY(-4px); border-color: var(--tint); box-shadow: 0 16px 36px -22px var(--tint); }
.bs-house-in { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; min-height: 210px; padding: 34px 14px 24px;
  text-align: center; text-decoration: none; color: var(--color-text); border-radius: inherit; }
.bs-house-in:focus-visible { outline: 2px solid var(--tint); outline-offset: -4px; }
.bs-hmark { color: var(--tint); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--tint) 55%, transparent)); }
:root[data-theme="day"] .bs-hmark { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--tint) 28%, transparent)); }
.bs-cam { display: block; width: clamp(70px, 6.4vw, 92px); height: auto; }
.bs-hname { font-weight: 800; font-size: 15px; letter-spacing: .22em; padding-inline-start: .22em; line-height: 1; }
.bs-htag { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--color-text) 72%, transparent); max-width: 22ch; }
.bs-house-in .ab-go { position: absolute; top: 12px; inset-inline-end: 12px; width: 15px; height: 15px; opacity: .5; transition: opacity .2s ease, transform .2s ease; }
.bs-house-in:hover .ab-go { opacity: 1; transform: translate(2px, -2px); }
[dir="rtl"] .bs-house-in .ab-go { transform: scaleX(-1); }

#follow .bs-so { align-items: center; text-align: center; gap: 8px; padding: 24px 14px 20px; }
#follow .bs-so-ico { width: 60px; height: 60px; border-radius: 18px; }
#follow .bs-so-net { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
#follow .bs-so-handle { display: block; font-size: 13px; white-space: nowrap; overflow: visible; text-overflow: clip; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
#follow .bs-so-space { flex: 1 1 auto; min-height: 10px; }
#follow .bs-so-go { align-self: center; margin-top: 0; }
/* v4.40.0 the houses in the built-in tree: mark and name, all the same size */
.bs-leaf { display: inline-flex; align-items: center; gap: 8px; }
.bs-leaf .bs-cam { width: 34px; }
.bs-leaf .bs-hname { font-size: 12px; letter-spacing: .18em; }
.bs-leaves .bs-leaf .bs-hmark { filter: none; }
.bs-leaves li { padding: 9px 8px; }
.bs-leaves li .ab-brand { padding: 4px; margin: 0; justify-content: center; }
.bs-leaves li .ab-brand:has(.bs-leaf) .ab-go { display: none; }
.bs-leaf { gap: 6px; }
.bs-leaf .bs-cam { width: 28px; }
.bs-leaf .bs-hname { font-size: 11.5px; letter-spacing: .1em; padding-inline-start: 0; }

/* v4.41.0 CA STUDIO leads its houses like CA PLAY; every card hugs its content
   (no fixed heights) and grows when wording is added */
#family .bs-play-card { gap: 8px; padding: clamp(18px, 2.4vw, 26px) 20px; margin-block-end: 12px;
  border-color: color-mix(in srgb, var(--tint) 45%, transparent);
  background: radial-gradient(90% 120% at 50% 0%, color-mix(in srgb, var(--tint) 18%, transparent), transparent 62%), linear-gradient(160deg, color-mix(in srgb, var(--tint) 9%, transparent), color-mix(in srgb, var(--n-violet) 6%, transparent)); }
#family .bs-play-card .ab-mark img { width: clamp(200px, 26vw, 320px); }
#family .bs-studio-card .bs-lockup { display: inline-flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); color: var(--color-text); text-decoration: none; }
#family .bs-studio-card .bs-cam { width: clamp(84px, 9vw, 120px); }
#family .bs-studio-card .bs-hname { font-size: clamp(26px, 3.4vw, 42px); letter-spacing: .24em; }
#family .bs-studio-card .bs-hmark { color: var(--tint); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--tint) 55%, transparent)); }
.bs-house-in { min-height: 0; justify-content: flex-start; gap: 8px; padding: 22px 12px 18px; }
.bs-cam { width: clamp(62px, 5.4vw, 80px); }
#family .ab-houses { grid-auto-rows: auto; align-items: stretch; }
/* v4.41.0 the channel cards hug their content too, and grow with any wording added */
#follow .bs-social { grid-auto-rows: auto; align-items: stretch; }
#follow .bs-so { gap: 4px; padding: 16px 12px 14px; }
#follow .bs-so-ico { width: 50px; height: 50px; border-radius: 15px; margin-bottom: 4px; }
#follow .bs-so-space { min-height: 6px; }