/* A guided tour of the product, followed by the engineering story. */
.service-showcase { --showcase-accent: #a2ceca; margin: 42px 0 40px; padding: 32px 0 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.showcase-heading { margin-bottom: 25px; }
.showcase-heading .eyebrow { color: var(--showcase-accent); font-size: .58rem; }
.showcase-heading h3 { margin-top: 12px; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 500; letter-spacing: -.8px; line-height: 1.5; }
.feature-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 22px; border: 1px solid #c5dfd61a; border-radius: 4px; background: #10141455; }
.feature-tabs button { position: relative; display: flex; flex-direction: column; align-items: start; gap: 8px; min-width: 0; padding: 15px 12px; text-align: left; font-size: .73rem; line-height: 1.5; color: #a4afac; transition: color .18s, background .18s; }
.feature-tabs button + button { border-left: 1px solid #c5dfd614; }
.feature-tabs button > span { font-size: .56rem; letter-spacing: 1px; color: #7f938f; }
.feature-tabs button:hover { background: #a2ceca08; color: #e9f1ee; }
.feature-tabs button[aria-selected="true"] { background: #a2ceca10; color: #e9f1ee; box-shadow: inset 0 -2px var(--showcase-accent); }
.feature-tabs button[aria-selected="true"] > span { color: var(--showcase-accent); }
.feature-tabs button:focus-visible { z-index: 1; outline-offset: 2px; }
.feature-panel { min-width: 0; }
.feature-panel + .feature-panel { margin-top: 32px; }
.feature-tabs:not([hidden]) ~ .feature-panels > .feature-panel { margin-top: 0; }
.feature-screen { overflow: hidden; border: 1px solid #d6e6e122; border-radius: 5px; background: #0f1313; }
.feature-screen-link { display: block; cursor: zoom-in; transition: border-color .18s; }
.feature-screen-link:hover { border-color: #a2ceca70; }
.feature-screen-link:focus-visible { outline-offset: 3px; }
.feature-screen-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 10px 15px; border-bottom: 1px solid #d6e6e116; background: #1a2020; color: #bccbc7; font-size: .61rem; line-height: 1.5; }
.feature-screen-bar > span:first-child { display: flex; align-items: center; gap: 9px; }
.feature-screen-bar > span:first-child::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--showcase-accent); }
.feature-screen-action { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: var(--showcase-accent); }
.feature-screen-action svg { width: 12px; height: 12px; }
.feature-demo-actions { display: flex; align-items: center; gap: 10px; }
.feature-playback { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #d6e6e12b; border-radius: 3px; color: var(--showcase-accent); }
.feature-playback:hover { background: #a2ceca14; }
.feature-playback svg { width: 12px; height: 12px; }
.feature-playback[data-paused="true"] .demo-pause, .feature-playback[data-paused="false"] .demo-play { display: none; }
.feature-screen img, .feature-screen video { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; background: #101314; }
.feature-copy { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 14px; min-height: 130px; padding: 24px 2px 0; }
.feature-copy > span { padding-top: 2px; color: var(--showcase-accent); font-size: 1.5rem; font-weight: 400; letter-spacing: -1px; line-height: 1.3; }
.feature-copy h4 { font-size: 1.02rem; font-weight: 500; line-height: 1.6; letter-spacing: -.3px; }
.feature-copy p { margin-top: 8px; max-width: 66ch; color: #aab2ae; font-size: .81rem; line-height: 1.9; }
.feature-screen .feature-print-poster { display: none; }
.has-feature-dialog { overflow: hidden; }
.feature-dialog { width: min(1440px, calc(100vw - 48px)); max-width: none; max-height: calc(100svh - 48px); margin: auto; padding: 0; overflow: hidden; border: 1px solid #a2ceca45; border-radius: 6px; background: #131718; color: var(--ink); box-shadow: 0 30px 100px #0009; }
.feature-dialog::backdrop { background: #080b0de8; }
.feature-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.feature-dialog-header h4 { font-size: .85rem; font-weight: 500; }
.feature-dialog-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.feature-dialog-actions button { min-height: 40px; padding: 8px 12px; border: 1px solid #d6e6e12b; border-radius: 3px; font-size: .72rem; }
.feature-dialog-actions button:hover { background: #a2ceca14; }
.feature-dialog-actions [data-feature-close] { width: 40px; padding: 8px; }
.feature-dialog-actions svg { display: block; width: 20px; height: 20px; }
.feature-dialog-stage { overflow: auto; max-height: calc(100svh - 120px); overscroll-behavior: contain; }
.feature-dialog-stage img { display: block; width: 100%; height: auto; max-height: calc(100svh - 120px); object-fit: contain; }
.feature-dialog.is-zoomed .feature-dialog-stage img { width: auto; max-width: none; max-height: none; }
.system-architecture { --showcase-accent: #a2ceca; margin-bottom: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--line); }
.architecture-intro { margin-top: 12px; color: #aab2ae; font-size: .81rem; line-height: 1.9; }
.architecture-figure { overflow: hidden; border: 1px solid #d6e6e122; border-radius: 5px; background: #111516; }
.architecture-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 15px; border-bottom: 1px solid #d6e6e116; background: #1a2020; font-size: .63rem; line-height: 1.7; }
.architecture-toolbar > span { color: #bccbc7; }
.architecture-toolbar a { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; color: var(--showcase-accent); }
.architecture-toolbar a:hover { color: #e9f1ee; }
.architecture-toolbar svg, .architecture-enlarge svg { width: 13px; height: 13px; }
.architecture-image { position: relative; padding-bottom: 46px; background: #111516; }
.architecture-image img { display: block; width: 100%; height: auto; }
.architecture-image:focus-visible { outline-offset: -3px; }
.architecture-enlarge { position: absolute; bottom: 14px; right: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--showcase-accent); font-size: .7rem; }
.architecture-image:hover .architecture-enlarge { color: #e9f1ee; }
.architecture-caption { padding: 13px 18px; border-top: 1px solid #d6e6e116; color: #aab2ae; font-size: .68rem; line-height: 1.85; }
.architecture-flows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 27px; }
.architecture-flows article { min-width: 0; }
.architecture-flows article > span { display: block; margin-bottom: 10px; color: var(--showcase-accent); font-size: .6rem; letter-spacing: 1px; }
.architecture-flows h4 { font-weight: 500; font-size: .85rem; line-height: 1.6; }
.architecture-flows p { margin-top: 8px; color: #aab2ae; font-size: .73rem; line-height: 1.9; overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .feature-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }.feature-tabs button { padding: 12px; gap: 4px; }.feature-tabs button:nth-child(4) { border-left: 0; }.feature-tabs button:nth-child(n+4) { border-top: 1px solid #c5dfd614; }
  .feature-copy { min-height: 150px; }
}
@media (max-width: 740px) {
  .system-architecture { margin-bottom: 30px; padding-bottom: 27px; }.architecture-intro { font-size: .75rem; }
  .architecture-toolbar { padding: 10px 12px; font-size: .6rem; gap: 6px; }.architecture-caption { padding: 12px; font-size: .63rem; }
  .architecture-flows { grid-template-columns: 1fr; gap: 19px; margin-top: 22px; }.architecture-flows article { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 10px; }.architecture-flows article > span { grid-row: 1 / 3; margin: 3px 0 0; }.architecture-flows p { margin: 0; }.architecture-flows h4 { font-size: .81rem; }
  .service-showcase { margin: 30px 0; padding: 27px 0 22px; }.showcase-heading { margin-bottom: 20px; }.showcase-heading h3 { font-size: 1.3rem; }
  .feature-tabs { margin-bottom: 16px; }.feature-tabs button { padding: 11px 8px; font-size: .65rem; }.feature-tabs button > span { font-size: .5rem; }
  .feature-screen-bar { min-height: 36px; padding: 8px 10px; font-size: .56rem; }
  .feature-copy { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; min-height: 174px; padding-top: 20px; }.feature-copy > span { font-size: 1.1rem; }.feature-copy h4 { font-size: .88rem; }.feature-copy p { font-size: .75rem; line-height: 1.85; }
  .feature-dialog { width: calc(100vw - 20px); max-height: calc(100svh - 24px); }.feature-dialog-header { padding: 10px; gap: 8px; }.feature-dialog-header h4 { font-size: .7rem; }.feature-dialog-actions { gap: 6px; }.feature-dialog-actions button { padding: 8px; font-size: .63rem; }
}
@media (prefers-reduced-motion: reduce) { .feature-tabs button, .feature-screen-link { transition: none; } }
@media print {
  .architecture-toolbar a, .architecture-enlarge { display: none; }.architecture-image { padding: 0; }.architecture-figure { break-inside: avoid; }.architecture-intro, .architecture-caption, .architecture-flows h4, .architecture-flows p, .architecture-flows article > span { color: #222; }
  .has-feature-dialog { overflow: visible; }
  .feature-tabs, .feature-dialog, .feature-screen-action, .feature-playback, .feature-screen video { display: none !important; }
  .service-showcase .feature-panel[hidden], .feature-screen .feature-print-poster { display: block !important; }
  .service-showcase { break-inside: auto; }.service-showcase .feature-panels > .feature-panel { margin-top: 25px; break-inside: avoid; }
  .showcase-heading h3, .feature-copy > span, .feature-copy h4, .feature-copy p { color: #222; }
  .feature-copy { min-height: 0; padding-top: 15px; }.feature-screen { border-color: #ccc; }.feature-screen-bar { background: #eee; color: #222; }
}