/* Shared lightweight product-page styling. CW-Lossless v11 baseline.
   Main site /style.css remains unchanged. Add future product styles here. */
/* CW-Lossless lightweight product layout - approved v9; scoped to this page by dedicated PHP entry. */

:root{color-scheme:light;--navy:#073b73;--blue:#0863a9;--link:#075b9a;--orange:#ef861c;--ink:#243b50;--line:#cfdae4;--soft:#eff5fa;--surface:white}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#eaf0f5;color:var(--ink);font:15px/1.65 Verdana,Geneva,sans-serif}a{color:var(--link)}a:hover{text-decoration:underline}a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}h1,h2,h3{font-family:Verdana,Geneva,sans-serif;line-height:1.26;margin:0 0 .65em}h1{font-size:clamp(1.5rem,3vw,2.2rem)}h2{font-size:1.3rem;color:var(--navy)}h3{font-size:1rem;color:var(--navy);margin-top:1.7em}p{margin:.65em 0 1em}ul{padding-left:1.5rem}li+li{margin-top:.35em}code{background:#eaf1f6;border-radius:3px;padding:2px 4px}
.shell{max-width:1080px;margin:auto;padding:0 20px}.masthead{background:linear-gradient(#1464a2 0%,#08467f 47%,#06376d 100%);border-bottom:4px solid #e88620;color:white}.masthead-inner{display:flex;gap:18px;align-items:center;padding-top:17px;padding-bottom:17px}.brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;min-width:0}.brand-symbol{display:grid;place-items:center;flex:0 0 43px;height:43px;background:linear-gradient(#ffc671,#ea790b);border:1px solid #ffd69c;border-radius:9px;box-shadow:0 2px 4px #062f5b60;font-weight:bold;font-size:22px;color:#123d64}.brand strong{display:block;font-size:19px;line-height:1.22;font-weight:normal}.brand small{display:block;opacity:.85;font-size:11px}.nav{margin-left:auto;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.nav a{padding:8px 10px;color:white;text-decoration:none;font-size:12px;border-radius:4px}.nav a[aria-current=page],.nav a:hover{background:#ffffff25}.nav .download{background:linear-gradient(#ff9b32,#de6b07);border:1px solid #ffbc78;font-weight:bold;margin-left:4px}
.crumbs{font-size:12px;color:#54708a;margin:20px 0}.crumbs a{color:#3a688b}.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;background:linear-gradient(115deg,#fff,#eef6fb);border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:6px;padding:27px 28px;margin-bottom:18px}.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:bold;color:#426b89;margin-bottom:12px}.hero h1{color:#0c477e}.hero p{max-width:700px;margin:.4rem 0 1.1rem}.version{border-left:1px solid var(--line);padding-left:20px;min-width:145px;font-size:12px}.version strong{display:block;font-size:22px;color:var(--navy)}.btn{display:inline-block;background:linear-gradient(#ffac4e,#e8740c);color:#163e61;border:1px solid #d66f13;border-radius:4px;text-decoration:none;font-weight:bold;padding:10px 16px;font-size:13px;box-shadow:0 2px 3px #26374716}.btn:hover{text-decoration:none;filter:brightness(1.035)}.btn.secondary{background:white;border-color:#a1bed3;color:var(--navy)}.actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}
.layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;align-items:start}.sidebar{position:sticky;top:12px;background:#fff;border:1px solid var(--line);border-radius:5px;padding:17px}.sidebar strong{color:var(--navy);font-size:13px}.sidebar a{display:block;padding:7px 0;border-bottom:1px solid #edf1f5;font-size:12px;text-decoration:none}.sidebar a:last-child{border-bottom:0}.panel{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:23px 26px;margin-bottom:16px}.panel h2{padding-bottom:10px;border-bottom:1px solid #dce5ec}.intro{font-size:14px}.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.fact{background:var(--soft);font-size:12px;padding:6px 10px;border:1px solid #dce8f2;border-radius:3px}.table-scroll{overflow:auto}.data-table{width:100%;border-collapse:collapse;font-size:13px;line-height:1.55}.data-table th,.data-table td{padding:10px 12px;vertical-align:top;text-align:left;border-bottom:1px solid #e1e9ef}.data-table th{color:#174e7b}.data-table tbody tr:nth-child(even){background:#f5f9fc}.example{margin:18px 0 22px}.example img{max-width:100%;height:auto;display:block;border:1px solid #c9d9e6;border-radius:4px}.example figcaption{font-size:12px;color:#587085;margin-top:7px}.note{background:#eff6fc;border-left:3px solid #2b7eb5;padding:11px 14px}details{border-bottom:1px solid #e2eaf0;padding:12px 0}summary{cursor:pointer;color:#104f80;font-weight:bold}details p{padding:0 5px}.related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.related a{border:1px solid var(--line);border-radius:4px;padding:10px;background:#f7fafc;text-decoration:none;font-size:13px}.footer{color:#526b80;font-size:12px;border-top:1px solid #c6d6e2;margin-top:20px;padding:22px 0 35px;text-align:center}.footer a{margin:0 7px}.scope-note{font-size:11px;color:#6b7987;text-align:center;padding:8px}
@media(max-width:850px){.masthead-inner{flex-direction:column;align-items:flex-start}.nav{margin-left:0}.layout{grid-template-columns:1fr}.sidebar{position:static;display:flex;flex-wrap:wrap;gap:4px 12px}.sidebar strong{width:100%}.sidebar a{border:none}.hero{grid-template-columns:1fr}.version{border-left:0;border-top:1px solid var(--line);padding:12px 0 0}}@media(max-width:550px){.shell{padding:0 12px}.hero,.panel{padding:18px}.related{grid-template-columns:1fr}.brand strong{font-size:16px}.nav a{padding:6px 8px}.version strong{font-size:18px}}

/* Header reproduced from archive.mediaplayercodecpack.com styling; content section unchanged. */
body{background:#daf3fd}
.archive-header{max-width:986px;margin:0 auto;background:#daf3fd;min-height:310px;background-image:url("/images/bg_header.jpg");background-size:100% auto;background-position:center top;background-repeat:no-repeat;font-family:Verdana,Geneva,Tahoma,sans-serif}
.archive-header-inner{max-width:956px;margin:auto;padding:79px 10px 0}
.archive-topnav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.archive-topnav a{display:inline-flex;align-items:center;justify-content:center;min-height:43px;min-width:118px;padding:0 15px;background:linear-gradient(180deg,#00b7ea 0%,#009ec3 100%);border-radius:10px;box-shadow:2px 2px 8px #0003;font:15px/1.2 Helvetica,Verdana,sans-serif;color:white;text-transform:uppercase;text-decoration:none;text-align:center}
.archive-topnav a:hover,.archive-topnav a[aria-current="page"]{background:linear-gradient(180deg,#00c5f3,#007da6);text-decoration:none}
.archive-header-hero{min-height:198px;border-radius:0 0 12px 12px;background:linear-gradient(135deg,rgba(22,92,168,.96),rgba(39,125,220,.95) 55%,rgba(66,157,236,.92));color:white;padding:25px 30px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.archive-header-hero h1{font:bold 32px/1.15 Verdana,Geneva,sans-serif;color:white;margin:6px 0 9px}
.archive-header-hero p{color:white;font:15px/1.55 Verdana,Geneva,sans-serif;margin:0 0 13px}
.archive-eyebrow{color:#eaf5ff;font:11px/1.5 Verdana,Geneva,sans-serif;letter-spacing:.05em}
.archive-header-meta{display:flex;flex-wrap:wrap;gap:7px;font:12px/1.4 Verdana,Geneva,sans-serif}
.archive-header-meta span{padding:6px 10px;border-radius:18px;background:#ffffff1f;border:1px solid #ffffff30}
.archive-header-action{flex:0 0 auto;display:inline-flex;padding:13px 16px;background:linear-gradient(#ffa749,#ef7c13);border:1px solid #ffc283;border-radius:8px;color:#fff;font-weight:bold;font-size:12px;text-decoration:none;box-shadow:0 3px 7px #073b7360;text-align:center}
.archive-header-action:hover{color:white;text-decoration:none;filter:brightness(1.06)}
@media(max-width:720px){.archive-header{min-height:0;background-size:auto 350px}.archive-header-inner{padding:55px 12px 12px}.archive-topnav{gap:7px}.archive-topnav a{min-width:0;min-height:38px;font-size:12px;padding:0 10px}.archive-header-hero{padding:22px;display:block}.archive-header-action{margin-top:16px}.archive-header-hero h1{font-size:27px}}

/* Reserve archive pill buttons for the primary entry points. */
.archive-topnav{margin-bottom:13px}


/* v5: align the complete document to the 986px archive header canvas.
   Its 15px side gutters share the header's effective 956px content measure. */
.shell{width:100%;max-width:986px;padding-inline:15px;margin-inline:auto}
.shell > *, .layout, .layout > *, .layout main, .panel,
.hero, .sidebar, .table-scroll, .example{min-width:0;max-width:100%}
.layout{grid-template-columns:minmax(175px,195px) minmax(0,1fr);gap:16px}
.hero{padding:22px 24px;gap:16px}
.hero > *{min-width:0}
.panel{padding:20px 22px}
.table-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.data-table{max-width:100%}
.example img,.panel img{max-width:100%;height:auto}
.panel pre,.panel code{overflow-wrap:anywhere}
.related{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:850px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .sidebar{position:static}
}
@media(max-width:550px){
  .shell{padding-inline:12px}
  .hero,.panel{padding:17px}
  .related{grid-template-columns:minmax(0,1fr)}
}

/* v6: Restore the archive's full-width header/body/footer background system.
   All page types use the same 986px outside / 956px inside geometry. */
body { background:#daf3fd; }
.site-frame {
  width:100%; max-width:986px; margin:0 auto;
  background:#fff url("/images/bg_span.gif") repeat-y center top;
  background-size:100% auto;
  min-width:0;
}
.site-frame .archive-header { width:100%; max-width:none; margin:0; }
.site-frame .archive-header-inner,
.site-frame .shell { width:calc(100% - 30px); max-width:956px; margin-left:auto; margin-right:auto; }
.site-frame .shell { padding-inline:0; }
.site-frame .archive-header-inner { padding-inline:0; }
.site-frame .archive-header-hero { width:100%; }
.site-frame .page-body { min-width:0; }
.site-frame .page-body > * { min-width:0; }
.site-frame .layout { grid-template-columns:195px minmax(0,1fr); gap:16px; }
.site-frame .layout > * { min-width:0; }
.site-frame .panel,.site-frame .hero { max-width:100%; }
.site-frame .table-scroll { max-width:100%; overflow-x:auto; }
.site-frame img { max-width:100%; height:auto; }
.site-frame .footer {
  margin-top:22px; min-height:131px; padding-top:35px;
  background: url("/images/bg_footer.jpg") no-repeat center bottom;
  background-size:100% 131px;
}
@media(max-width:850px){
  .site-frame .layout { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:550px){
  .site-frame .archive-header-inner,
  .site-frame .shell { width:calc(100% - 24px); }
  .site-frame .hero,.site-frame .panel { padding:17px; }
}

/* v8: Restore the primary archive-button inset after the shared-frame reset.
   Match the main content's 18px side spacing; no changes to hero width. */
.site-frame .archive-topnav { padding-inline-start:18px; }
@media(max-width:720px){ .site-frame .archive-topnav { padding-inline-start:13px; } }

/* v7: Internal breathing room. Keep the archive's 986px frame and original artwork,
   while moving content panels away from the inner frame edges. */
.site-frame .page-body {
  padding-inline:18px;
  padding-bottom:16px;
}
.site-frame .crumbs {
  margin:23px 0 24px;
  line-height:1.7;
}
.site-frame .hero {
  margin-bottom:22px;
  padding:24px 26px;
}
.site-frame .layout { gap:18px; }
.site-frame .panel { margin-bottom:19px; }
.site-frame .sidebar { padding:18px; }
.site-frame .footer { margin-top:8px; }
@media(max-width:720px){
  .site-frame .page-body{padding-inline:13px;}
  .site-frame .hero{padding:20px;}
  .site-frame .crumbs{margin:18px 0 20px;}
}
@media(max-width:550px){
  .site-frame .page-body{padding-inline:8px;}
  .site-frame .hero{padding:18px;}
}

/* v9: Prevent the original footer artwork plus an extra border from producing
   an oversized bottom separator. Preserve the archive artwork and page frame. */
.site-frame .footer {
  border-top:0;
  min-height:88px;
  padding:18px 0 12px;
  margin-top:8px;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-size:100% auto;
}
.site-frame .footer .shell {line-height:1.5;}
.site-frame .footer p {margin:7px 0 0;}
@media(max-width:550px){
  .site-frame .footer {min-height:78px;padding-top:14px;}
}



/* CW product output path diagrams — scoped, zero JavaScript.
   All routes are illustrative; the actual DSP, device and driver determine the path. */
.output-path-example { margin:20px 0 16px; }
.output-path-example > figcaption { color:#47647a; font-size:12px; line-height:1.5; margin-top:13px; }
.output-path-example .output-path-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.output-path-example .output-path-route { min-width:0; background:#f8fbfe; border:1px solid #c7dceb; border-radius:6px; padding:12px 10px; }
.output-path-example .output-path-route--direct { border-color:#91bbdd; background:#f0f8ff; }
.output-path-example .output-path-route h4 { margin:0 0 10px; color:#0c477e; font-size:13px; line-height:1.4; }
.output-path-example .output-path-route ol { padding:0; margin:0 0 11px; list-style:none; }
.output-path-example .output-path-route li { position:relative; text-align:center; font-size:12px; line-height:1.35; padding:8px 5px; color:#183b55; background:#fff; border:1px solid #d5e3ed; border-radius:4px; overflow-wrap:anywhere; }
.output-path-example .output-path-route li + li { margin-top:18px; }
.output-path-example .output-path-route li + li::before { content:"↓"; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); line-height:18px; color:#507c9f; font-weight:bold; }
.output-path-example .output-path-route li:last-child { border-color:#eab776; background:#fff4e6; }
.output-path-example .output-path-route > p { font-size:12px; line-height:1.5; margin:8px 0 0; color:#425f76; }
/* Product body has a sidebar, so use its available width, not the viewport. */
.output-path-example { container-type:inline-size; }
@container (max-width:620px) { .output-path-example .output-path-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:720px) { .output-path-example .output-path-grid { grid-template-columns:minmax(0,1fr); } }