.support-page { --support-surface: #f5f9ff; --support-border: #e0e9f6; --support-green: #167653; }
.support-page .web-header { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; }
.support-page .web-header .brand { max-width: calc(100% - 3.75rem); }
.support-page .back-link { justify-content: center; flex-shrink: 0; min-width: 2.75rem; border: 1px solid var(--color-rule); border-radius: .25rem; font-size: 0; }
.support-page .back-link span { font-size: 1.25rem; }
.support-hero { display: grid; gap: 2rem; padding-block: 2.5rem 3rem; align-items: center; }
.support-hero__copy,.support-hero__visual { min-width: 0; }
.support-title { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.08; font-weight: 700; letter-spacing: -.045em; }
.support-title span { display: block; color: var(--color-accent); }
.support-description { margin-top: 1.5rem; max-width: 35rem; color: #46546a; line-height: 1.6; font-size: 1.0625rem; }
.support-categories { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1.5rem; font-size: .8125rem; color: #526079; }
.support-categories span + span::before { content: '·'; margin-right: 1rem; }
.support-demo { margin: 0; min-width: 0; }
.support-demo figcaption { margin-top: .75rem; font-size: .75rem; line-height: 1.5; color: #657085; }
.sd-window { overflow: hidden; border: 1px solid var(--support-border); border-radius: .75rem; background: #fff; box-shadow: 0 .75rem 2rem #2038610c; font-size: .8125rem; line-height: 1.45; }
.sd-chrome { display: none; align-items: center; gap: .25rem; padding: .625rem .75rem; background: #eff4fb; border-bottom: 1px solid var(--support-border); }
.sd-chrome i { width: .3125rem; height: .3125rem; border-radius: 50%; background: #91a9cd; }
.sd-chrome span { margin-left: auto; margin-right: auto; color: #657085; font-size: .625rem; }
.sd-layout { display: grid; min-width: 0; }
.sd-sidebar { display: none; padding: 1rem .625rem; border-right: 1px solid var(--support-border); background: #f9fbff; color: #657085; }
.sd-sidebar strong { display: flex; align-items: center; gap: .375rem; margin-bottom: 1.25rem; color: var(--color-ink); font-size: .75rem; }
.sd-sidebar svg { width: 1.125rem; height: 1.125rem; color: var(--color-accent); }
.sd-sidebar > span { display: flex; align-items: center; gap: .375rem; padding: .625rem .375rem; margin-bottom: .25rem; font-size: .6875rem; border-radius: .25rem; }
.sd-sidebar > span.selected { background: #eaf1ff; color: var(--color-accent); }
.sd-main { min-width: 0; padding: .875rem; }
.sd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .625rem; margin-bottom: 1rem; }
.sd-head strong { font-size: .9375rem; letter-spacing: -.025em; }
.sd-head p { color: #657085; font-size: .625rem; margin-top: .25rem; }
.sd-tag { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .375rem; border-radius: .25rem; background: #eaf1ff; color: #1254c5; font-size: .625rem; line-height: 1.4; font-weight: 500; }
.sd-tag--green { background: #e7f8f0; color: var(--support-green); }
.sd-tag--amber { background: #fff4df; color: #865800; }
.sd-tag svg { width: .875rem; height: .875rem; }
.sd-overview { display: grid; gap: .625rem; margin-bottom: .75rem; }
.sd-box { min-width: 0; border: 1px solid var(--support-border); border-radius: .375rem; padding: .75rem; }
.sd-box__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; font-size: .6875rem; }
.sd-box__head span { color: #657085; font-size: .625rem; }
.sd-chart { display: block; width: 100%; height: 5.5rem; overflow: visible; }
.sd-chart .chart-rule { stroke: #edf2fa; stroke-width: 1; fill: none; }
.sd-chart .chart-line { stroke: var(--color-accent); stroke-width: 2; fill: none; }
.sd-days { display: flex; justify-content: space-between; margin-top: .375rem; color: #657085; font-size: .5625rem; }
.sd-updates { display: none; }
.sd-log { display: flex; align-items: baseline; gap: .5rem; padding-block: .375rem; font-size: .625rem; }
.sd-log span { color: #657085; flex-shrink: 0; }
.sd-rows { display: grid; gap: .5rem; }
.sd-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .625rem; border: 1px solid var(--support-border); border-radius: .375rem; }
.sd-row > svg { width: 1.125rem; height: 1.125rem; color: var(--color-accent); flex-shrink: 0; }
.sd-row__copy { flex: 1; min-width: 6rem; }
.sd-row__copy strong { display: block; font-size: .75rem; font-weight: 600; }
.sd-row__copy p { font-size: .625rem; color: #657085; margin-top: .125rem; }
.sd-banner { display: flex; align-items: center; gap: .625rem; margin-block: .75rem; padding: .75rem; background: #eaf8f2; border-radius: .375rem; }
.sd-banner > svg { width: 1.375rem; height: 1.375rem; flex-shrink: 0; color: var(--support-green); }
.sd-banner strong { font-size: .75rem; display: block; }
.sd-banner p { margin-top: .125rem; color: #526079; font-size: .625rem; }
.sd-section-label { display: flex; justify-content: space-between; gap: .5rem; margin: 1rem 0 .5rem; font-size: .6875rem; font-weight: 600; }
.sd-section-label span { font-weight: 400; color: #657085; font-size: .625rem; }
.sd-component { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: .625rem 0; border-bottom: 1px solid #edf2fa; font-size: .6875rem; }
.sd-board { display: none; gap: .75rem; }
.sd-release-details { display: none; }
.sd-column { min-width: 0; }
.sd-column h4 { margin: 0 0 .5rem; font-size: .6875rem; }
.sd-column h4 span { color: #657085; font-weight: 400; margin-left: .25rem; }
.sd-ticket { padding: .625rem; margin-bottom: .5rem; border: 1px solid var(--support-border); border-radius: .375rem; background: #fff; }
.sd-ticket strong { display: block; font-size: .6875rem; font-weight: 550; margin-bottom: .5rem; }
.sd-ticket p { color: #657085; font-size: .625rem; margin-top: .25rem; }
.sd-column:not(:first-child) .sd-ticket:last-child { display: none; }
.sd-board .sd-column:not(:first-child) { display: none; }
.sd-mobile-tabs { display: flex; justify-content: space-between; gap: .5rem; padding: .5rem; margin-bottom: .75rem; background: #f1f5fb; border-radius: .375rem; font-size: .6875rem; color: #526079; }
.sd-mobile-tabs span:first-child { color: var(--color-accent); font-weight: 600; }
.support-directions { padding-bottom: 2.5rem; }
.support-directions__grid { display: grid; gap: 2.5rem; }
.support-direction { min-width: 0; }
.support-direction + .support-direction { border-top: 1px solid var(--color-rule); padding-top: 2.5rem; }
.support-direction__heading { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.support-direction__number { font-size: 2.75rem; line-height: 1; color: #a7c7ff; font-weight: 600; letter-spacing: -.06em; }
.support-direction h3 { margin: 0 0 .5rem; font-size: 1.375rem; line-height: 1.2; letter-spacing: -.03em; }
.support-direction__heading p { color: #657085; font-size: .9375rem; line-height: 1.6; }
.support-direction__heading .support-features { margin-top: .625rem; font-size: .75rem; }
.support-task-list { display: grid; gap: 1.5rem; padding: 0; margin: 1.5rem 0 2rem; list-style: none; }
.support-task-list li { display: flex; align-items: flex-start; gap: .875rem; min-width: 0; }
.support-icon { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: .5rem; background: #eff5ff; color: var(--color-accent); }
.support-icon svg { width: 1.375rem; height: 1.375rem; }
.support-task-list h3 { margin: 0 0 .375rem; font-size: .9375rem; }
.support-task-list p { color: #657085; font-size: .8125rem; line-height: 1.6; }
.support-external { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; border-radius: .5rem; background: #eff6ff; margin-bottom: 2rem; }
.support-external h3 { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.4; color: var(--color-accent); }
.support-external p { font-size: .875rem; line-height: 1.6; color: #46546a; }
.support-formats { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; padding: 0; margin: 1.5rem 0 0; list-style: none; }
.support-formats li { display: flex; gap: 1rem; padding: 1.25rem; border: 1px solid var(--support-border); border-radius: .5rem; }
.support-formats h3 { margin: 0 0 .375rem; font-size: 1rem; }
.support-formats p { font-size: .875rem; color: #657085; line-height: 1.6; }
.sd-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.support-direction__heading > div,.sd-banner > div,.support-task-list li > div,.support-external > div,.support-formats li > div,.support-page .process__step > div { min-width: 0; }
.support-external,.support-formats li { flex-wrap: wrap; }
.support-external > div,.support-formats li > div { flex: 1; min-width: min(100%,12rem); }
@media (min-width: 40rem) {
  .sd-main { padding: 1.25rem; }
  .sd-chrome { display: flex; }
  .sd-layout { grid-template-columns: 6.5rem minmax(0,1fr); }
  .sd-sidebar { display: block; }
  .sd-overview { grid-template-columns: 1.2fr 1fr; }
  .sd-updates { display: block; }
  .sd-mobile-tabs { display: none; }
  .sd-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; }
  .sd-mobile-tasks { display: none; }
  .sd-release-details { display: block; }
  .sd-board .sd-column:not(:first-child) { display: block; }
  .sd-column { padding: .5rem; background: #f5f8fc; border-radius: .375rem; }
  .sd-column:not(:first-child) .sd-ticket:last-child { display: block; }
  .support-task-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .support-formats { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 64rem) {
  .support-page .back-link { border: 0; padding: .75rem; font-size: .875rem; }
  .support-directions__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; }
  .support-direction + .support-direction { border-top: 0; border-left: 1px solid var(--color-rule); padding-top: 0; padding-left: 2rem; }
  .support-direction .sd-layout { grid-template-columns: 5.5rem minmax(0,1fr); }
  .support-direction .sd-main { padding: .875rem; }
  .support-direction .sd-sidebar { padding-inline: .375rem; }
  .support-direction .sd-board { grid-template-columns: 1fr; }
  .support-direction .sd-column { display: block; }
  .support-direction .sd-ticket { margin-bottom: 0; }
  .support-direction .sd-column .sd-ticket + .sd-ticket { display: none; }
  .support-task-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (min-width: 68.75rem) {
  .support-hero { grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr); gap: 2rem; padding-block: 3rem 4rem; }
  .support-title { font-size: clamp(2.5rem,3.5vw,3.6rem); }
  .support-description { font-size: 1.125rem; }
}
@media (min-width: 80rem) {
  .support-direction .sd-board { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .support-direction .sd-column .sd-ticket + .sd-ticket { display: block; margin-top: .5rem; }
}
@media (forced-colors: active) { .sd-tag,.sd-banner,.support-external { border: 1px solid CanvasText; } }

/* Panel columns respond to their own width and the user's text size. */
.sd-window { container-type: inline-size; }
.sd-layout,.support-direction .sd-layout { grid-template-columns: minmax(0,1fr); }
.sd-sidebar { display: none; }
.sd-head > div,.sd-box__head > strong,.sd-log > p,.sd-component > span { min-width: 0; }
.sd-box__head,.sd-log,.sd-days,.sd-mobile-tabs { flex-wrap: wrap; }
.sd-days { gap: .25rem .5rem; }
.sd-row__copy { min-width: min(100%,6rem); }
.sd-tag { max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 40rem) {
  .sd-overview { grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); }
  .sd-board,.support-direction .sd-board { grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)); }
}
@container (min-width: 32rem) {
  .sd-layout,.support-direction .sd-layout { grid-template-columns: 6rem minmax(0,1fr); }
  .sd-sidebar { display: block; }
}