/* Flagship product: one visual opening, two short films, and a connected app family. */
.xbar-flagship-page .product-page { padding-top: 1.6rem; }
.xbar-flagship-page .back-home { margin-bottom: 1.4rem; }
.xbar-flagship-page .discord-product { display: block; }
.xbar-flagship-page .discord-product > section { margin-top: 3rem; }
.xbar-flagship-page .discord-product > .flagship-opening { margin-top: 0; }
.flagship-opening {
  position: relative;
  background: #102a25 radial-gradient(ellipse at 80% 0%, #34544288, transparent 65%);
  border: 1px solid #73856b;
  border-radius: 3px 30px 3px 3px;
  overflow: hidden;
  color: #f3eed7;
}
.flagship-opening::before {
  content: '';
  position: absolute;
  inset: 0 0 auto auto;
  width: 250px;
  height: 64px;
  background: url('assets/circuit-edge.svg') right top / contain no-repeat;
  opacity: .55;
  pointer-events: none;
}
.flagship-opening-main { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 2.2rem; padding: 2.5rem; }
.flagship-introduction { min-width: 0; }
.flagship-opening p { color: #c2cec1; }
.flagship-opening .eyebrow { margin: 0 0 1rem; font-size: .65rem; letter-spacing: .13em; color: #efb768; }
.flagship-name { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.2rem; }
.product-page .flagship-name h1 { font-size: clamp(3.3rem, 5vw, 4.6rem); color: #f3eed7; line-height: .95; }
.flagship-version { color: #c2cec1; font-size: .65rem; border: 1px solid #607a66; border-radius: 99px; padding: .35rem .65rem; white-space: nowrap; }
.flagship-introduction h2 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.15; letter-spacing: -.025em; margin: 1.4rem 0 1rem; }
.flagship-introduction .flagship-lead { margin: 0; font-size: .975rem; line-height: 1.65; max-width: 37ch; }
.flagship-capability-list { display: flex; flex-wrap: wrap; list-style: none; gap: .45rem; padding: 0; margin: 1.25rem 0 0; }
.flagship-capability-list li { font-size: .75rem; color: #f3eed7; border: 1px solid #63775b; background: #294538; border-radius: 3px 9px 3px 3px; padding: .3rem .7rem; }
.flagship-introduction .flagship-more { margin: .9rem 0 0; font-size: .875rem; }
.flagship-introduction .flagship-standalone { margin: .3rem 0 0; font-size: .78rem; color: #b8c7b8; }
.flagship-interest { display: inline-flex; align-items: center; gap: 1.5rem; min-height: 44px; margin-top: 1.1rem; color: #efb768; font-size: .85rem; font-weight: 600; }
.flagship-film { min-width: 0; }
.flagship-film-label { display: flex; gap: 1rem; justify-content: space-between; font-size: .65rem; font-weight: 600; letter-spacing: .14em; color: #e5c78f; padding-bottom: .7rem; }
.flagship-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #102a25; border: 1px solid #63775b; border-radius: 5px; box-shadow: 0 18px 30px #051c1930; }
.flagship-film .flagship-video { width: 100%; }
.flagship-video-caption, .flagship-opening .flagship-video-caption { font-size: .75rem; line-height: 1.6; margin: .7rem 0 0; color: #c2cec1; }
.flagship-transcript { margin-top: .55rem; }
.flagship-opening .flagship-transcript > summary, .flagship-family .flagship-transcript > summary { color: #efb768; font-size: .8rem; font-weight: 600; min-height: 44px; padding-block: .6rem; }
.flagship-opening .flagship-transcript > p, .flagship-family .flagship-transcript > p { color: #c2cec1; font-size: .85rem; line-height: 1.7; margin-top: .3rem; }
.flagship-powered { display: grid; grid-template-columns: .85fr 1fr 1fr; gap: 0; border-top: 1px solid #607052; background: #183a3188; padding: 0 2.5rem; }
.flagship-power-source { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: 1.15rem 1.3rem 1.15rem 0; position: relative; }
.flagship-power-source img { width: 36px; height: 36px; flex: 0 0 36px; }
.flagship-powered strong { display: block; font-size: 1rem; font-weight: 600; line-height: 1.4; }
.flagship-powered span { display: block; font-size: .75rem; color: #c2cec1; }
.flagship-powered > a { display: block; position: relative; border-left: 1px solid #607052; padding: 1rem 1.4rem; text-decoration: none; min-width: 0; }
.flagship-powered > a::before { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #c79a57; background: #183a31; left: -4px; top: 50%; }
.flagship-powered > a:hover { background: #36544066; }
.flagship-powered strong span { display: inline; color: #efb768; font-size: .8rem; }
.flagship-powered .flagship-powered-label { color: #e5c78f; font-size: .55rem; font-weight: 600; letter-spacing: .14em; margin-bottom: .2rem; }
.flagship-below-opening { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2rem; padding: 1.5rem .1rem; }
.flagship-below-opening .flagship-control { margin: 0; max-width: 75ch; font-size: .82rem; line-height: 1.6; padding-left: .8rem; border-left: 2px solid #b77b32; }
.flagship-control strong { color: #183b2e; }
.flagship-below-opening .flagship-availability { margin: 0; font-size: .75rem; line-height: 1.65; text-align: right; }
.flagship-jumps { display: flex; flex-wrap: wrap; gap: .5rem .8rem; border-block: 1px solid #b4c3b2; padding: .7rem 0; }
.flagship-jumps a { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.3rem; min-height: 44px; padding: .55rem .8rem; border-radius: 3px 10px 3px 3px; font-size: .8rem; color: #244d3c; font-weight: 600; }
.flagship-jumps a:hover { background: #d6dfcf; }
.flagship-jumps a span { color: #805419; }
.xbar-flagship-page :is(#xbar-creative, #desktop-preview, #xbar-parental-controls, #xbar-family) { scroll-margin-top: 2rem; }
.xbar-flagship-page .creative-studio { border-top: 0; padding-top: 0; }
.xbar-flagship-page .creative-studio::before { display: none; }
.xbar-flagship-page .creative-studio .preview-heading { max-width: none; display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 2rem; align-items: end; }
.xbar-flagship-page .creative-studio .preview-heading .eyebrow { grid-column: 1 / -1; margin-bottom: .2rem; }
.xbar-flagship-page .creative-studio .preview-heading h2 { margin-bottom: 0; }
.xbar-flagship-page .creative-studio .preview-heading > p:last-child { max-width: 52ch; margin-bottom: 0; font-size: .95rem; }
.xbar-flagship-page .creative-tools article { padding: 1.2rem; }
.xbar-flagship-page .creative-tools article > p:last-child { font-size: .86rem; }
.xbar-flagship-page .parental-preview, .xbar-flagship-page #desktop-preview, .xbar-flagship-page .xbar-direction { padding-top: 2.4rem; }
.flagship-family { padding-block: 3rem 3.5rem; border-bottom: 1px solid #456057; position: relative; }
.flagship-family::before { content: ''; position: absolute; top: -1px; right: 0; width: 180px; height: 30px; background: url('assets/circuit-divider.svg') right top / 180px 30px no-repeat; pointer-events: none; }
.flagship-family-heading { display: grid; grid-template-columns: 1.1fr .9fr; column-gap: 3rem; align-items: end; }
.flagship-family-heading .eyebrow { grid-column: 1 / -1; color: #efb768; font-size: .7rem; margin-bottom: .8rem; }
.flagship-family-heading h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); max-width: 28ch; }
.flagship-family-heading > p:last-child { font-size: .95rem; max-width: 45ch; }
.flagship-family-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 2rem; margin-top: 2rem; align-items: start; }
.flagship-family-body > div { min-width: 0; }
.flagship-family .picture-links { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.flagship-family .picture-link { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; border-radius: 3px 16px 3px 3px; }
.flagship-family .picture-frame { aspect-ratio: auto; min-height: 144px; }
.flagship-family .picture-frame img { height: 100%; width: 100%; object-fit: cover; }
.flagship-family .picture-copy { padding: 1.1rem; border-top: 0; border-left: 1px solid #607052; }
.flagship-family .picture-copy h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.flagship-family .picture-copy p { font-size: .8rem; margin: 0; }
.flagship-family .picture-copy > span { font-size: .75rem; margin-top: .4rem; }
.flagship-family .picture-copy b { width: 23px; height: 23px; right: .8rem; bottom: .7rem; font-size: .75rem; }
@media (max-width: 1100px) {
  .flagship-opening-main { padding: 2rem; gap: 1.6rem; }
  .flagship-name { gap: .7rem 1rem; }
  .flagship-powered { padding-inline: 2rem; }
  .flagship-powered > a { padding-inline: 1rem; }
  .flagship-family .picture-link { grid-template-columns: 80px minmax(0, 1fr); }
  .flagship-family .picture-copy h3 { font-size: 1.25rem; }
}
@media (max-width: 850px) {
  .flagship-opening-main { grid-template-columns: 1fr; gap: 1.8rem; }
  .flagship-introduction { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
  .flagship-introduction > .eyebrow, .flagship-name { grid-column: 1 / -1; }
  .flagship-introduction h2 { grid-column: 1; grid-row: 3 / 6; align-self: center; margin: 1.2rem 0 0; }
  .flagship-introduction .flagship-lead { grid-column: 2; margin-top: 1.2rem; }
  .flagship-capability-list, .flagship-more, .flagship-standalone { grid-column: 2; }
  .flagship-interest { grid-column: 1; grid-row: 6 / 8; align-self: start; margin-top: .5rem; }
  .flagship-powered { grid-template-columns: .9fr 1fr 1fr; padding-inline: 1.4rem; }
  .flagship-power-source img { display: none; }
  .flagship-powered strong { font-size: .9rem; }
  .flagship-powered span { font-size: .7rem; }
  .flagship-below-opening { grid-template-columns: 1fr; gap: .8rem; }
  .flagship-below-opening .flagship-availability { text-align: left; }
  .flagship-below-opening .flagship-availability br { display: none; }
  .flagship-family-body { grid-template-columns: 1fr; }
  .flagship-family-heading { grid-template-columns: 1fr; gap: 1rem; }
  .flagship-family-heading .eyebrow { margin-bottom: 0; }
  .flagship-family-heading > p:last-child { max-width: 55ch; }
  .flagship-family .picture-links { grid-template-columns: 1fr 1fr; }
  .flagship-family .picture-link { grid-template-columns: 1fr; }
  .flagship-family .picture-frame { aspect-ratio: 21 / 9; min-height: 0; }
  .flagship-family .picture-copy { border-left: 0; border-top: 1px solid #607052; }
}
@media (max-width: 620px) {
  .xbar-flagship-page .product-page { padding-top: 1.2rem; }
  .xbar-flagship-page .back-home { margin-bottom: 1.1rem; }
  .flagship-opening { border-radius: 3px 22px 3px 3px; }
  .flagship-opening::before { width: 160px; height: 24px; opacity: .45; }
  .flagship-opening-main { padding: 1.4rem 1.1rem; gap: 1.5rem; }
  .flagship-introduction { display: block; }
  .flagship-opening .eyebrow { font-size: .57rem; line-height: 1.7; }
  .product-page .flagship-name h1 { font-size: 3.4rem; }
  .flagship-version { font-size: .59rem; }
  .flagship-introduction h2 { font-size: 1.85rem; margin-top: 1.2rem; }
  .flagship-introduction .flagship-lead { font-size: .9rem; margin-top: .85rem; }
  .flagship-capability-list { margin-top: 1rem; }
  .flagship-capability-list li { padding: .25rem .5rem; font-size: .7rem; }
  .flagship-introduction .flagship-more { font-size: .82rem; }
  .flagship-interest { margin-top: .8rem; }
  .flagship-powered { grid-template-columns: 1fr 1fr; padding-inline: 1.1rem; }
  .flagship-power-source { grid-column: 1 / -1; padding: .8rem 0; gap: .6rem; }
  .flagship-power-source img { display: block; width: 25px; height: 25px; flex-basis: 25px; }
  .flagship-power-source > div { display: flex; flex-wrap: wrap; gap: .25rem .65rem; align-items: baseline; }
  .flagship-powered > a { border-top: 1px solid #607052; padding: .85rem .7rem; }
  .flagship-powered > a:first-of-type { border-left: 0; padding-left: 0; }
  .flagship-powered > a:first-of-type::before { display: none; }
  .flagship-powered strong { font-size: .8rem; }
  .flagship-powered > a > span:last-child { font-size: .66rem; line-height: 1.6; }
  .flagship-below-opening { padding-block: 1.2rem; }
  .flagship-below-opening .flagship-control { font-size: .78rem; }
  .flagship-jumps { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
  .flagship-jumps a, .flagship-jumps a:nth-child(2) { display: flex; padding-inline: .4rem; font-size: .72rem; gap: .5rem; }
  .xbar-flagship-page .discord-product > section { margin-top: 2.3rem; }
  .xbar-flagship-page .creative-studio .preview-heading { display: block; }
  .xbar-flagship-page .creative-studio .preview-heading > p:last-child { margin-top: 1rem; font-size: .9rem; }
  .xbar-flagship-page .creative-tools { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .xbar-flagship-page .creative-tools article { padding: 1rem .85rem; }
  .xbar-flagship-page .creative-tools h3 { font-size: 1.2rem; }
  .xbar-flagship-page .creative-tools article > p:last-child { font-size: .8rem; }
  .flagship-family { padding-block: 2.5rem; }
  .flagship-family-body { gap: 1.4rem; margin-top: 1.5rem; }
  .flagship-family .picture-links { grid-template-columns: 1fr; }
  .flagship-family .picture-link { grid-template-columns: 80px minmax(0, 1fr); }
  .flagship-family .picture-frame { aspect-ratio: auto; }
  .flagship-family .picture-copy { border-left: 1px solid #607052; border-top: 0; }
}
@media (max-width: 360px) {
  .flagship-opening-main { padding-inline: .9rem; }
  .flagship-introduction h2 { font-size: 1.65rem; }
  .flagship-name { gap: .7rem; }
  .flagship-powered { padding-inline: .9rem; }
  .xbar-flagship-page .creative-tools { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}