/* 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; }
}

/* Customer release history: shares the flagship palette and typography. */
.xbar-release-notes{scroll-margin-top:2rem;border-top:1px solid #607a66;padding-top:2.5rem}
.xbar-release-notes .preview-heading{max-width:760px}
.xbar-release-entry{padding:1.8rem 2rem;background:#183a31;border:1px solid #607a66;border-top:3px solid #efb768;border-radius:3px 18px 3px 3px;color:#f3eed7}
.xbar-release-entry h3{font:400 clamp(1.6rem,3vw,2.2rem)/1.25 Georgia,serif;margin:.5rem 0 1rem}
.xbar-release-entry h3 span{display:inline-block;font:600 .75rem/1.5 Arial,sans-serif;color:#efb768;border:1px solid #607a66;border-radius:99px;padding:.2rem .6rem;vertical-align:middle}
.xbar-release-entry p,.xbar-release-entry li{color:#c2cec1;line-height:1.7}
.xbar-release-entry ul{padding-left:1.25rem;max-width:75ch}
.xbar-release-entry li+li{margin-top:.7rem}
.xbar-release-entry .xbar-release-summary{color:#f3eed7;font-size:1.1rem}
.xbar-release-entry .xbar-release-help{border-top:1px solid #456057;padding-top:1rem;margin-bottom:0}
@media(max-width:540px){.xbar-release-entry{padding:1.25rem}.xbar-release-notes{padding-top:1.5rem}}

.xbar-release-entry+.xbar-release-entry{margin-top:1.5rem}

.feature-inventory{margin-block:1.5rem;scroll-margin-top:2rem}.feature-inventory>h3{margin-bottom:.5rem}.feature-inventory>p{max-width:85ch;margin-bottom:1rem}.feature-inventory .creative-controls{margin-block:.55rem}.feature-inventory li{margin-bottom:.85rem;line-height:1.65}.feature-inventory summary:focus-visible{outline:2px solid #efb768;outline-offset:4px}

.feature-screen-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:start;margin:1.25rem 0 .5rem}.feature-inventory .feature-shot{margin:1rem 0;max-width:680px;padding:0;border:0;border-radius:0;background:none;box-shadow:none}.feature-inventory .feature-shot img{display:block;width:auto;height:auto;max-width:100%;max-height:420px;object-fit:contain;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:default}.feature-inventory .feature-shot figcaption{padding:.5rem 0;font-size:.85rem;color:#48604c;background:none}.feature-inventory .feature-shot-preview{margin:0}.feature-inventory .feature-screen-hint{font-size:.8rem;margin-bottom:1.25rem;color:#48604c}@media(max-width:600px){.feature-screen-pair{gap:.75rem}.feature-inventory .feature-shot-preview img{max-height:260px}.feature-inventory .feature-shot figcaption{font-size:.75rem}.feature-inventory .feature-shot img{max-height:350px}}