/* Scena product demos, capability cards, plans, and downloads. */
:root {
  --product-canvas: #eff4fa;
  --product-warm-canvas: #fcf3ee;
  --product-stage: #10141c;
  --product-stage-card: #1a202a;
  --product-stage-line: #414b5b;
  --product-stage-muted: #c5cbd5;
  --product-frame-shadow: 0 2px 5px rgb(26 31 40 / 0.04), 0 16px 34px -24px rgb(26 31 40 / 0.32);
}

/* Give each product screenshot a stable canvas and keep its interface legible. */
.hv :is(#catalogue, #catalogue--t, #catalogue--m) {
  background: var(--product-canvas) !important;
  border-block-color: var(--scena-line, #dce2ea) !important;
}

.hv :is(#catalogue, #catalogue--t, #catalogue--m) :is(.card, div:has(> .catbtn)) {
  background: #fff !important;
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: var(--scena-radius-card, 16px) !important;
  box-shadow: var(--product-frame-shadow);
}

.hv :is(#catalogue, #catalogue--t, #catalogue--m) .catbtn {
  border-radius: 10px !important;
}

.hv :is(#catalogue, #catalogue--t, #catalogue--m) .catbtn > span:last-child {
  color: inherit !important;
  opacity: .85;
}

.hv :is(#catalogue, #catalogue--t, #catalogue--m) .card > div:nth-child(2) > div:has(> img),
.hv figure[data-block="featmedia"] {
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: var(--scena-radius-card, 16px) !important;
  box-shadow: var(--product-frame-shadow) !important;
}

.hv :is(#features, #features--t, #features--m) .wrap > div:has(> div > figure[data-block="featmedia"]) {
  background: var(--product-canvas) !important;
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: 0 0 var(--scena-radius-card, 16px) var(--scena-radius-card, 16px);
}

.hv figure[data-block="featmedia"] > a {
  background: #e8eef6 !important;
}

.hv figure[data-block="featmedia"] > a img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.hv :is(#guide, #guide--t, #guide--m) .card,
.hv :is(#download, #download--t, #download--m) .card {
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: var(--scena-radius-card, 16px) !important;
}

/* Let the screen captures and section names organize the feature catalog. */
.feature-group-heading {
  background: transparent !important;
  border: 0 !important;
  border-block-end: 1px solid var(--scena-line, #dce2ea) !important;
  border-radius: 0 !important;
  padding-inline: 0 !important;
}

.feature-group-heading > h2 {
  color: var(--scena-ink, #1c2028) !important;
  font-size: clamp(1.35rem, 1.12rem + .65vw, 1.8rem) !important;
}

.page > main .cap:has(.cap-annotation) {
  background: #fff !important;
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  transform: none !important;
}

.page > main .cap:has(.cap-annotation) .cc-tile {
  color: var(--scena-muted, #555762) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page > main .cap > .cap-media {
  background: #eeece6 !important;
  border-bottom-color: var(--scena-line, #dce2ea) !important;
}

.page > main .cap > .cap-media > img {
  object-fit: contain !important;
  object-position: center;
}

.page > main .cap:hover > .cap-media > img {
  transform: none;
}

.page > main .cap > .cap-media + div {
  padding: 16px 17px 18px !important;
  gap: 8px !important;
}

.page > main .cap > .cap-media + div > span:nth-child(2) {
  font-size: clamp(1rem, .94rem + .3vw, 1.2rem) !important;
  font-weight: 720 !important;
}

.page > main .cap > .cap-media + div > span:nth-child(3) {
  line-height: 1.6 !important;
}

.page > main .cap > .cap-media + div > .mono {
  padding-inline: 0 !important;
  background: transparent;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--scena-muted, #555762) !important;
}

.page > main .cap > .cap-media + div > .cap-annotation {
  font-size: .66rem;
  letter-spacing: .045em;
}

.feature-group-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin-top: 18px;
  border-block: 1px solid var(--scena-line, #dce2ea);
}

.feature-group-links > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--scena-action, #a63118);
  font-size: .875rem;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page > main #ai-catalog {
  padding-inline: clamp(14px, 2.8vw, 26px) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.page > main #ai-catalog > div:first-child > .mono {
  padding-inline: 0 !important;
  background: transparent !important;
}

.page > main #ai-catalog > p + div > div {
  background: transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

/* Keep footage on a dark stage and separate it from its descriptive text. */
.hv .creator-reel video,
.hv :is(#gallery, #gallery--t, #gallery--m) .gframe {
  border-radius: var(--scena-radius-card, 16px) !important;
  border-color: var(--product-stage-line) !important;
}

.hv .creator-reel video {
  box-shadow: 0 18px 50px -30px rgb(0 0 0 / 0.78);
}

.hv .creator-reel-chapters a {
  background: var(--product-stage-card);
  border-color: var(--product-stage-line);
  border-radius: 10px;
}

.hv .creator-reel-chapters a:is(:hover, [aria-current="true"]) {
  background: #342621;
  border-color: #ba816d;
}

.hv :is(#gallery, #gallery--t, #gallery--m) {
  background: var(--product-stage) !important;
}

.hv :is(#gallery, #gallery--t, #gallery--m) .gframe {
  background: var(--product-stage-card) !important;
}

.hv :is(#gallery, #gallery--t, #gallery--m) .gallery-card-title,
.page > main .creator-sample-copy h3 {
  font-weight: 720 !important;
  text-wrap: balance;
}

.hv :is(#gallery, #gallery--t, #gallery--m) .gallery-card-note,
.page > main :is(.creator-sample-intro, .creator-sample-copy p, .creator-sample-note) {
  color: var(--product-stage-muted) !important;
}

.page > main .creator-sample-copy {
  padding: 17px 18px 20px;
}

.page > main .creator-sample-format {
  color: #d4aa97;
  font-size: .67rem;
  letter-spacing: .055em;
}

.page > main .creator-sample-card {
  border-color: #3b3e43 !important;
  border-radius: 5px !important;
  background: #222324 !important;
  box-shadow: none !important;
}

#creator-samples :is(.creator-sample-controls, .creator-sample-card)[hidden] { display: none; }

.creator-sample-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 24px;
  border-bottom: 1px solid #555653;
}

.creator-sample-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
}

.creator-sample-filters button {
  min-height: 44px;
  padding: 6px 0 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--product-stage-muted);
  font: 620 .88rem/1.4 var(--scena-type, system-ui);
  cursor: pointer;
}

.creator-sample-filters button:is(:hover, [aria-pressed="true"]) { color: #fff; }

.creator-sample-filters button[aria-pressed="true"] {
  border-bottom-color: #edb5a0;
  font-weight: 730;
}

.creator-sample-filters button:focus-visible { outline-offset: -2px; }

.creator-sample-count {
  margin: 0;
  color: var(--product-stage-muted);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 599px) {
  .creator-sample-controls { padding-bottom: 6px; }
  .creator-sample-filters { gap: 0 13px; }
  .creator-sample-filters button { font-size: .8rem; }
}

.page > main .showcase-episodes > li {
  border-radius: 5px !important;
  box-shadow: none !important;
}

.showcase-episode-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 9px;
  padding-top: 9px;
  border-top: 1px solid var(--scena-line, #dedfe6);
  color: var(--scena-muted, #555762);
  font-size: .68rem;
  line-height: 1.45;
}

.showcase-episode-meta > :nth-child(even) { text-align: end; }
.showcase-episode-meta > :nth-child(3) { overflow-wrap: anywhere; }

.page > main .showcase-episodes > li a {
  min-height: 44px;
  border-radius: 4px !important;
  background: transparent !important;
}

.page > main .showcase-episode-action {
  position: absolute;
  inset: auto auto 8px 8px;
  max-width: calc(100% - 16px);
  min-height: 44px;
  padding: 7px 11px;
  border: 1px solid #555754;
  border-radius: 3px;
  background: #222324;
  color: #fff;
  font: 650 .75rem/1.3 var(--scena-type, system-ui);
  text-align: start;
  cursor: pointer;
}

.page > main .showcase-episode-action:hover { background: #3b3d3e; }

/* Show the plan identity, price and action before the supporting details. */
.page > main .plan-open-test {
  border-radius: 5px !important;
  background: #232425 !important;
  box-shadow: none !important;
}

.page > main .plan-open-test a {
  min-width: 0;
  max-width: 100%;
  white-space: normal !important;
}

.page > main .plan-grid {
  display: grid;
  gap: 16px;
}

.page > main .plan-grid > .plan {
  --plan-ink: var(--scena-ink, #202631);
  --plan-padding: clamp(15px, 2vw, 23px);
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--scena-line, #dce2ea);
  border-radius: 5px !important;
  background: #fff;
  box-shadow: none !important;
}

.page > main .plan-grid > .plan--creator {
  --plan-ink: #a63118;
  border-color: #b6755e;
}

.page > main .plan-intro {
  padding: var(--plan-padding) var(--plan-padding) 16px;
}

.page > main .plan-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px 10px;
  margin-bottom: 13px;
}

.page > main .plan-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--plan-ink);
  font-size: 1rem;
  font-weight: 720;
}

.page > main .plan-icon {
  display: grid;
  place-items: center;
  inline-size: 19px;
  block-size: 24px;
}

.page > main .plan-note {
  color: var(--plan-ink);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.35;
}

.page > main .plan-intro h3 {
  margin: 0;
  font-size: clamp(1.12rem, 1.025rem + .38vw, 1.33rem);
  font-weight: 720;
  line-height: 1.24;
  letter-spacing: -.018em;
}

.page > main .plan-intro p {
  margin: 7px 0 0;
  color: var(--scena-muted, #4b5666);
  font-size: .875rem;
  line-height: 1.55;
}

.page > main .plan-price {
  background: #f5f3ee !important;
  border: 0 !important;
  border-radius: 4px !important;
}

.page > main .plan--creator .plan-price {
  background: var(--product-warm-canvas) !important;
}

.page > main .plan span[style*="font-size: 44px"] {
  font-size: clamp(2rem, 1.62rem + 1.3vw, 2.75rem) !important;
  font-variant-numeric: lining-nums tabular-nums;
}

.page > main .plan-purchase {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 9px;
  padding-inline: var(--plan-padding);
}

.page > main .plan-purchase .plan-price { margin-top: 0 !important; }

.page > main .plan .plan-purchase > a {
  box-sizing: border-box;
  width: 100%;
  margin-top: 0 !important;
  padding: 8px 12px !important;
  border-radius: 5px !important;
  text-align: center;
  text-wrap: balance;
}

.page > main .plan-perks {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 18px var(--plan-padding) var(--plan-padding);
}

.page > main .plan-perks > span:first-child { margin-top: 0 !important; }

.page > main .plan-diagrams {
  margin-top: 14px;
  border: 1px solid var(--scena-line, #dce2ea);
  border-radius: 5px;
  background: #fff;
}

.page > main .plan-diagrams > summary {
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 15px;
  color: var(--scena-ink, #202631);
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
}

.page > main .plan-diagram-grid {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.page > main .plan-diagram-grid img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--scena-line, #dce2ea);
  border-radius: 4px;
}

@media (min-width: 768px) {
  .page > main .plan-grid,
  .page > main .plan-diagram-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .page > main .plan-topline { display: grid; justify-items: start; }
}

@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .page > main .plan-grid { row-gap: 0; }
    .page > main .plan-grid > .plan {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
    }
    .page > main .plan-purchase {
      grid-row: span 2;
      grid-template-rows: subgrid;
    }
  }
}

/* Keep the original screenshot and its caption together. The link lets
   readers inspect interface details at native size. */
.page > main .feature-evidence {
  padding: clamp(8px, 1.25vw, 14px);
  border: 1px solid var(--scena-line, #dce2ea);
  border-radius: 5px;
  background: #f4f2ec;
}

.page > main .feature-evidence > div:has(> img) {
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.page > main .feature-evidence > figcaption {
  margin-top: 0 !important;
  padding: 9px 5px 3px;
  color: #4b5666 !important;
}

.page > main .feature-evidence-open {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  min-height: 44px;
  color: var(--scena-action, #b5331b);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page > main .feature-evidence-open:hover { color: var(--scena-action-hover, #912713); }

@media (min-width: 900px) {
  .page > main .feature-evidence-open { min-height: 32px; }
}

.page > main .feat-steps-bento {
  gap: 0 clamp(20px, 4vw, 56px) !important;
}

.page > main .feat-steps-bento > li {
  display: grid !important;
  grid-template-columns: 7ch minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 17px 0 !important;
  border: 0 !important;
  border-block-start: 1px solid var(--scena-line, #dedfe6) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.page > main .feat-steps-bento > li > .mono:first-child {
  justify-content: flex-start !important;
  margin-top: 4px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--scena-action, #a63118) !important;
  font-size: .68rem !important;
}

.page > main .feat-spec-table {
  padding: 0 !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.page > main .feat-spec-table dt {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Keep period choices in one row, with room for labels in either language. */
.page > main .product-billing-switch {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--scena-line, #dedfe6);
  border-radius: 4px !important;
  background: #fff !important;
}

.page > main .product-billing-switch > button {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 2px !important;
  min-height: 52px !important;
  min-width: 0;
  padding: 7px 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  text-align: center;
  line-height: 1.25;
}

.page > main .product-billing-switch > button + button {
  border-inline-start: 1px solid var(--scena-line, #dedfe6) !important;
}

.page > main .product-billing-switch > button:is([aria-checked="true"], [aria-pressed="true"]) {
  background: #f4eee7 !important;
  box-shadow: inset 0 -2px var(--scena-action, #a63118) !important;
  font-weight: 750 !important;
}

.page > main .product-billing-switch > button:focus-visible { outline-offset: -3px; }
.page > main .product-billing-switch > button > span:nth-child(2) {
  color: var(--scena-muted, #555762) !important;
  font-size: .68rem !important;
}

.checkout-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 26px;
  padding: 0 0 10px;
  list-style: none;
  border-bottom: 1px solid var(--scena-line, #dedad2);
}

.checkout-progress li {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 6px;
  color: var(--scena-muted, #555762);
  font-size: .84375rem;
}

.checkout-progress li:has(~ [aria-current="step"]),
.checkout-progress li[aria-current="step"] { color: var(--scena-ink, #17181c); }

.checkout-progress li[aria-current="step"] {
  box-shadow: inset 0 -2px var(--scena-action, #a63118);
  font-weight: 700;
}

.checkout-progress li[aria-current="step"] > .mono { color: var(--scena-action, #a63118); }

@media (max-width: 440px) {
  .checkout-progress {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .checkout-progress li { padding: 2px 0 2px 10px; }

  .checkout-progress li[aria-current="step"] { box-shadow: inset 2px 0 var(--scena-action, #a63118); }
}

.page > main .checkout-plan-picker button[role="radio"] {
  border: 1px solid var(--scena-line, #dedfe6) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.page > main .checkout-plan-picker button[aria-checked="true"] {
  border-color: #ac735f !important;
  background: #f7f4ed !important;
  box-shadow: inset 2px 0 var(--scena-action, #a63118) !important;
}

.page > main :is(.card:has([data-billing-open]), .card:has([data-r~="co.15"])) {
  border-radius: 5px !important;
  box-shadow: none !important;
}

/* The diagrams share the same paper treatment as the comparison rows. */
.page > main .comparison-diagram {
  min-width: 0;
  padding: 4px !important;
  border-radius: 4px !important;
  background: #f4f2ec !important;
  box-shadow: none !important;
  overflow-x: auto;
}

.comparison-diagram > svg { min-width: 410px; }

.page > main .comparison-row {
  align-items: start !important;
  column-gap: clamp(12px, 2.25vw, 26px) !important;
}

@media (max-width: 900px) {
  .page > main .comparison-diagrams { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 599px) {
  .page > main .comparison-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .comparison-row > span:first-child:empty { display: none; }
  .comparison-row > span:first-child:not(:empty) { grid-column: 1 / -1; }
  .page > main .product-billing-switch { width: 100%; }
  .page > main .product-billing-switch > button { padding-inline: 5px !important; }
}

/* Distinguish the release note from the actual installer choice. */
.page > main .download-release-note {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 9px 24px !important;
  padding: 17px 0 !important;
  border-block: 1px solid var(--scena-line, #dedfe6);
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page > main .download-release-note > span:first-child {
  grid-column: 1 / -1;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--scena-action, #a63118) !important;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.page > main .download-release-note span > span { color: var(--scena-muted, #555762) !important; }
.page > main .download-release-note > span:nth-child(2) > span:first-child {
  color: var(--scena-ink, #1b1b23) !important;
}

.page > main .download-release-note svg { stroke: var(--scena-action, #a63118); }

.download-signal-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--scena-line, #dedfe6);
  border-radius: 3px;
  background: #efede7;
}

.download-signal-label {
  color: var(--scena-muted, #555762);
  font-size: .67rem;
  letter-spacing: .04em;
}

@media (max-width: 670px) {
  .page > main .download-release-note { grid-template-columns: minmax(0, 1fr); }
}

/* SHA-256 is an optional follow-up to the primary installer action. */
.page > main .download-checksum {
  min-width: 0;
  padding: clamp(12px, 2vw, 19px) !important;
  border: 1px solid var(--scena-line, #dce2ea) !important;
  border-radius: 4px;
  background: #f4f2ec;
  overflow-wrap: anywhere;
}

.page > main .download-checksum > span:first-child {
  color: var(--scena-ink, #202631) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
}

/* Separate the installer action from supporting setup and integrity details. */
.page > main:has([data-block="sscap"]) :is(.card:has([data-copy-text]), [data-block="connects"]) {
  background: #fff !important;
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

.page > main:has([data-block="sscap"]) [data-block="connects"] {
  background: #f4f2ec !important;
}

.page > main:has([data-block="sscap"]) .card :is(a[href$=".exe"], a[href$=".zip"], a[href$=".msi"]) {
  font-weight: 720 !important;
}

/* Present the Windows architecture as an index and a single reading pane. */
body > .page > main .pc-architecture {
  --pc-paper: #f4f2ec;
  --pc-ink: #212629;
  --pc-muted: #525750;
  --pc-rule: #d0cec4;
  --pc-mark: #ad3d24;
  padding-block: clamp(38px, 6vw, 80px) !important;
  border-block: 1px solid var(--pc-rule);
  background: var(--pc-paper) !important;
  color: var(--pc-ink) !important;
}

.pc-architecture-intro h2 {
  color: var(--pc-ink) !important;
  font-size: clamp(1.9rem, 1.25rem + 2vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em !important;
}

.pc-architecture-intro p {
  max-inline-size: 62ch;
  color: var(--pc-muted) !important;
}

.pc-architecture .pc-architecture-build {
  margin-block-end: 5px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--pc-mark) !important;
}

.pc-architecture-layout {
  display: grid;
  grid-template-columns: minmax(205px, .36fr) minmax(0, 1fr);
  border-block: 1px solid var(--pc-rule);
}

.pc-architecture-layout:has(> .pc-architecture-detail > .pc-benchmark) {
  border-block-end: 0;
}

.pc-architecture .pc-architecture-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start;
  gap: 0 !important;
  min-inline-size: 0;
}

.pc-architecture .pc-architecture-nav > button {
  display: grid !important;
  grid-template-columns: 2ch minmax(0, 1fr);
  align-items: center;
  gap: 12px !important;
  min-inline-size: 0;
  min-block-size: 49px;
  padding: 10px 13px !important;
  border: 0 !important;
  border-block-end: 1px solid var(--pc-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--pc-ink) !important;
  line-height: 1.3;
  transform: none !important;
  transition: none !important;
}

.pc-architecture .pc-architecture-nav > button > .mono {
  color: var(--pc-muted) !important;
  font-size: .6875rem !important;
  font-weight: 550 !important;
}

.pc-architecture .pc-architecture-nav > button > strong {
  color: inherit !important;
  font-size: .875rem !important;
  font-weight: 610 !important;
  overflow-wrap: anywhere;
}

.pc-architecture .pc-architecture-nav > button[aria-pressed="true"] {
  background: #e9e6dd !important;
  box-shadow: inset 3px 0 var(--pc-mark) !important;
}

.pc-architecture .pc-architecture-nav > button[aria-pressed="true"] > .mono {
  color: var(--pc-mark) !important;
}

.pc-architecture .pc-architecture-nav > button[aria-pressed="true"] > strong {
  font-weight: 750 !important;
}

.pc-architecture .pc-architecture-nav > button:focus-visible {
  outline: 2px solid var(--pc-mark) !important;
  outline-offset: -3px !important;
}

@media (hover: hover) and (pointer: fine) {
  .pc-architecture .pc-architecture-nav > button[aria-pressed="false"]:hover {
    background: #edebe4 !important;
  }
}

.pc-architecture .pc-architecture-detail {
  min-inline-size: 0;
  padding: clamp(20px, 3vw, 37px) !important;
  border: 0 !important;
  border-inline-start: 1px solid var(--pc-rule) !important;
  border-radius: 0 !important;
  background: #fbfaf6 !important;
}

.pc-architecture-detail h3 {
  max-inline-size: 42ch;
  color: var(--pc-ink) !important;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -.025em !important;
}

.pc-architecture-detail p { color: var(--pc-muted) !important; }

.pc-architecture-detail > :not(.pc-benchmark) > h3 + div {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.pc-architecture-detail > :not(.pc-benchmark) > h3 + div > div {
  padding: 14px 0 !important;
  border: 0 !important;
  border-block-start: 1px solid var(--pc-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.pc-architecture-detail > :not(.pc-benchmark) strong { color: var(--pc-ink) !important; }

.pc-architecture-detail > :not(.pc-benchmark) .mono {
  padding: 0 !important;
  background: transparent !important;
  color: var(--pc-muted) !important;
}

.pc-architecture-detail .pc-benchmark {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
}

.pc-architecture-detail .pc-benchmark-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-block: 1px solid var(--pc-rule);
}

.pc-benchmark-metrics > div {
  min-inline-size: 0;
  padding: 11px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.pc-benchmark-metrics > div + div { border-inline-start: 1px solid var(--pc-rule) !important; }
.pc-benchmark-metrics > div:first-child { padding-inline-start: 0 !important; }

.pc-benchmark-metrics strong {
  color: var(--pc-ink) !important;
  font-size: clamp(.95rem, .78rem + .75vw, 1.36rem) !important;
  white-space: nowrap;
}

.pc-benchmark-metrics span { color: var(--pc-muted) !important; }

.pc-benchmark .pc-ram-chart {
  min-inline-size: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.pc-ram-chart h4 {
  margin: 0;
  color: var(--pc-ink);
  font-size: .875rem;
}

.pc-ram-chart-label {
  align-items: baseline;
  gap: 6px 12px;
}

.pc-ram-chart-label .mono {
  color: var(--pc-ink) !important;
  white-space: nowrap;
}

.pc-ram-chart .pc-ram-chart-track {
  height: 6px !important;
  border-radius: 0 !important;
  background: #e8e5dc !important;
}

.pc-ram-chart-track > div {
  border-radius: 0 !important;
  background: #686d6d !important;
}

.pc-ram-chart > div:nth-child(2) .pc-ram-chart-track > div { background: var(--pc-mark) !important; }

.pc-ram-chart-axis {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: -7px;
  color: var(--pc-muted);
  font-size: .6875rem;
}

@media (max-width: 739px) {
  .pc-architecture-layout { grid-template-columns: minmax(0, 1fr); }
  .pc-architecture .pc-architecture-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .pc-architecture .pc-architecture-nav > button:nth-child(odd) {
    border-inline-end: 1px solid var(--pc-rule) !important;
  }
  .pc-architecture .pc-architecture-detail {
    padding-inline: 0 !important;
    border-inline-start: 0 !important;
    background: transparent !important;
  }
}

/* Supporting details need the same contrast as the product headings. */
body > .page > main .scena-pc-showcase > .wrap > div:has(> button) > button > span {
  color: #fff !important;
}

.page > main [data-insight-upgrade] > .wrap > .mono:first-child,
.page > main [data-insight-upgrade="features-v1"] .mono[style*="color: rgb(216, 65, 28)"],
.page > main .product-table-scroll span[style*="color: rgb(216, 65, 28)"],
.page > main .plan [style*="color: rgb(216, 65, 28)"] > span:not(.cc-tile),
.page > main section > .wrap > ol > li > div > a[href*="youtube.com/"] > .mono,
.page > main:has([data-insight-upgrade="compare-v1"]) :is(span[style*="font-size: 15px; font-weight: 700; color: rgb(216, 65, 28)"], span[style*="font-size: 13.5px; font-weight: 700; color: rgb(216, 65, 28)"]),
.page > main:has([data-block="sscap"]) :is(a[href$="guide/install"], a[href="changelog"], a[href="download/thanks"])[style*="color: rgb(216, 65, 28)"] {
  color: #a63118 !important;
}

.page > main [data-insight-upgrade] th[style*="background: rgb(216, 65, 28)"] {
  background: #eee7de !important;
  color: var(--scena-ink, #1b1b23) !important;
}

.page > main:has([data-block="sscap"]) span[style*="background: rgb(216, 65, 28)"][style*="color: rgb(255, 255, 255)"] {
  background: #ab351d !important;
}

.page > main [data-insight-upgrade] td[style*="color: rgb(12, 133, 119)"],
.page > main:has([data-block="sscap"]) span[style*="color: rgb(12, 133, 119)"][style*="background: rgb(232, 241, 233)"] {
  color: #08675a !important;
}

.page > main:has(.plan) .card span[style*="color: rgb(182, 185, 190)"],
.page > main:has([data-block="sscap"]) .card:has([data-copy-text]) span[style*="color: rgb(182, 185, 190)"] {
  color: var(--scena-ink, #273140) !important;
}

.page > main #creator-samples .eyebrow {
  padding-inline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #edb5a0 !important;
}

.page > main .product-table-scroll {
  overflow-x: auto;
  scrollbar-color: #737f8f #edf1f6;
}

.page > main .product-table-scroll:focus-visible {
  outline: 2px solid var(--scena-action, #ab351d);
  outline-offset: 3px;
}

.page > main .plan-matrix-scroll {
  margin-top: 16px;
  border: 1px solid var(--scena-line, #dedfe6);
  border-radius: 5px !important;
  box-shadow: none !important;
}

.plan-matrix {
  width: 100%;
  min-width: 38rem;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--scena-ink, #202631);
  font-size: .875rem;
  line-height: 1.45;
}

.plan-matrix :is(th, td) {
  padding: 10px 12px;
  border-bottom: 1px solid var(--scena-line, #dedfe6);
  background: #fff;
  text-align: center;
  overflow-wrap: anywhere;
}

.plan-matrix thead th { border-bottom-color: #77736b; }
.plan-matrix thead th > span { display: block; }

.plan-matrix :is(th[scope="row"], thead th:first-child) {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  width: clamp(8rem, 23vw, 17rem);
  border-inline-end: 1px solid var(--scena-line, #dedfe6);
  text-align: start;
  font-weight: 630;
}

.plan-matrix th[scope="rowgroup"] {
  background: #f4f2ec;
  text-align: start;
}

.plan-matrix th[scope="rowgroup"] > span {
  position: sticky;
  inset-inline-start: 12px;
}

.plan-matrix tr > :nth-child(3) { background: #fcf5ee; }
.plan-matrix tbody:last-child tr:last-child > * { border-bottom: 0; }

.plan-matrix-hint { display: none; }

@media (max-width: 680px) {
  .plan-matrix { font-size: .8rem; }
  .plan-matrix :is(th, td) { padding: 9px 8px; }
  .plan-matrix th[scope="rowgroup"] > span { inset-inline-start: 8px; }
  .plan-matrix-hint {
    display: block;
    margin: 12px 0 0;
    color: var(--scena-muted, #555762);
    font-size: .8rem;
  }
  .page > main .plan-matrix-scroll { margin-top: 8px; }
}

.page > main :is(.card:has(.dl-bar), section[aria-labelledby="verify"]) {
  background: #f4f2ec !important;
  border-color: var(--scena-line, #dce2ea) !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

.page > main :is(.card, section[aria-labelledby="verify"]) button[data-copy-text] {
  min-height: 36px !important;
}

.page > main [data-r~="co.15"][aria-disabled="true"] > span {
  color: #4c535d;
}

@media (max-width: 440px) {
  .page > main :is(.card, section[aria-labelledby="verify"]) button[data-copy-text] {
    min-height: 44px !important;
  }

  .page > main button[role="radio"][data-x^="co:0:"] {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    column-gap: 10px !important;
    row-gap: 6px !important;
    padding: 13px 14px !important;
  }

  .page > main button[role="radio"][data-x^="co:0:"] > span:last-child {
    grid-column: 2;
    justify-self: start;
  }

  .page > main div:has(> .showcase-actions) { padding-inline: 20px !important; }

  .page > main .showcase-actions {
    min-width: 0;
    width: 100%;
  }

  .page > main .showcase-actions > a {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding-block: 8px !important;
    white-space: normal !important;
  }
}