/* W04.3: source-preserved components; visible navigation; video-first layout.
 * All approved button/logo files are unchanged. No synthetic silhouette or font binaries.
 */
:root{--rail:216px;--rail-small:78px;--header-edge:120px}
html{scroll-behavior:auto;scroll-padding-top:18px}body{overflow-x:clip}
.preview-strip{font-size:10px;padding-block:5px}
.site-header,html[data-theme] .site-header{max-width:1920px;width:100%;padding:12px 22px;gap:12px;min-height:90px;flex-wrap:nowrap;z-index:25;display:flex}
.site-header .brand-shell,html[data-theme] .site-header .brand-shell{width:190px;flex:0 0 190px;background-image:url('assets/button-white-orange.png')}
.top-navigation{display:flex;align-items:center;justify-content:center;gap:7px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:thin;padding:6px 3px}
.top-navigation .nav-signature{display:flex;align-items:center;justify-content:center;gap:3px;width:132px;min-width:132px;aspect-ratio:1113/277;min-height:44px;padding:5px 15px 5px 8px;background:url('assets/button-white-orange.png') center/contain no-repeat;color:#143859;font:600 11px/1.35 var(--display);text-align:center;border:0}
.top-navigation .nav-signature:nth-child(2){width:155px;min-width:155px}.top-navigation .nav-create{width:220px;min-width:220px;font-size:11px}.top-navigation .brand-inline{height:21px}.top-navigation .create-second{display:inline-flex;gap:2px}
.header-actions{margin-left:0;flex:0 0 auto;gap:7px}.header-actions .icon-button{width:42px;height:42px;min-height:42px;background:#fff;border:1.5px solid var(--orange);color:#143859;border-radius:50%}
.header-actions .account{display:flex;align-items:center;justify-content:center;width:124px;min-width:124px;min-height:44px;font-size:11px;padding:8px 16px 8px 9px;background:url('assets/button-white-orange.png') center/contain no-repeat;border:0;color:#143859}
.top-navigation [aria-current=page]{text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px}
/* Pinned by default; a compact labelled rail remains visible in Auto-hide. */
.left-navigation{position:fixed;left:12px;top:var(--header-edge);bottom:14px;width:var(--rail);z-index:24;overflow-y:auto;overflow-x:hidden;border:1px solid #ed801c;border-radius:19px;background:#fffdf8;color:#143859;padding:13px 10px;scrollbar-width:thin;box-shadow:none;transition:width .16s ease}
.sidebar-controls{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:42px;margin-bottom:8px}.sidebar-caption{font-size:12px;font-weight:600}.sidebar-mode{background:none;border:0;display:flex;align-items:center;gap:5px;font:10px var(--display);color:#143859;min-height:44px;min-width:44px;padding:4px;cursor:pointer}.sidebar-mode svg{width:17px;height:17px}
.sidebar-close{display:none;background:none;border:0;font:24px Arial,sans-serif;min-width:40px;min-height:40px;color:#143859}.sidebar-help{font:11px/1.65 'Trebuchet MS',sans-serif;color:#4c6380;margin:20px 8px 0}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:12px 8px;margin:2px 0;min-height:48px;min-width:0;font-size:11px;line-height:1.6;border:1px solid transparent;border-radius:10px}.sidebar-link>svg{flex:none;width:22px;height:22px;stroke-width:1.5}.sidebar-link .brand-inline{height:21px}.sidebar-link:hover,.sidebar-link[aria-current=page]{background:#fff2df;border-color:#ecb377}.sidebar-link:focus-visible{outline:2px solid #ee801c;outline-offset:-2px}
body>main,body>.site-footer{margin-left:calc(var(--rail) + 28px);width:calc(100% - var(--rail) - 28px);max-width:none}
body[data-menu-mode=auto]>main,body[data-menu-mode=auto]>.site-footer{margin-left:calc(var(--rail-small) + 25px);width:calc(100% - var(--rail-small) - 25px)}
body[data-menu-mode=auto] .left-navigation{width:var(--rail-small);padding-inline:4px}
body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-controls{justify-content:center}
body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-caption,body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) #sidebar-mode-label,body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-help{display:none}
body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-link{flex-direction:column;justify-content:center;gap:4px;padding:10px 2px;font-size:8px;text-align:center;line-height:1.5}
body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-link .brand-inline{height:16px}
body[data-menu-mode=auto] .left-navigation[data-expanded=true]{width:var(--rail);padding-inline:10px;box-shadow:4px 8px 20px #0a264121}
body[data-menu-mode=auto] .left-navigation[data-expanded=true] .sidebar-close{display:block}
/* Compact introduction, then 2/3 player + 1/3 suggestions, information underneath. */
.homepage-hero .hero-inner.hero-grid{max-width:1660px;padding:15px 26px 26px;gap:22px}
.hero-introduction.intro-compact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center}
.hero-grid h1{font-size:clamp(22px,2.2vw,33px);line-height:1.5;margin-bottom:7px;letter-spacing:-.04em}
.hero-grid .eyebrow{font-size:9px;margin-bottom:8px}.hero-grid .hero-copy{font-size:12px;line-height:1.7;max-width:600px}
.intro-actions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;max-width:470px}
.intro-actions .signature,.hero-grid .intro-actions .signature{width:clamp(186px,16vw,232px);max-width:100%;min-height:0;aspect-ratio:1113/277}
.intro-actions .signature>span,.hero-grid .intro-actions .signature>span{font-size:clamp(10px,.82vw,12px);left:8%;right:20%;line-height:1.3;white-space:nowrap}
.intro-actions .signature.create-cta,.hero-grid .intro-actions .signature.create-cta{width:clamp(218px,19vw,264px)}
.intro-actions .signature.create-cta>span,.hero-grid .intro-actions .signature.create-cta>span{font-size:10.5px;white-space:normal;left:8%;right:19%;font-weight:600}
.intro-actions .signature .brand-inline{height:20px}.intro-actions .create-second{min-height:19px;display:inline-flex;gap:2px}.intro-actions .signature .arrow{width:18px;height:18px;top:calc(50% - 9px);left:84%}
.intro-actions #how-it-works{width:186px}
.screen-layout{display:grid;grid-template-columns:minmax(0,2.45fr) minmax(230px,1fr);gap:20px;align-items:start;min-width:0}
.home-screen{padding:15px;border-radius:19px;box-shadow:none;border:1px solid #ffffffad}
.screen-frame{border-radius:12px;aspect-ratio:16/9}.screen-frame video{margin:0;border-radius:0;object-fit:contain}
.screen-poster-copy{padding:12px}.screen-poster-copy p{font-size:clamp(15px,1.6vw,24px);line-height:1.55}.screen-poster .signature{width:clamp(205px,21vw,290px);max-width:92%}.screen-poster .signature>span{font-size:11px}.poster-demo-label{font-size:9px}
.video-information{padding:16px 1px 8px}.video-information .screen-heading{margin-bottom:10px;gap:10px}.video-information .screen-heading h2{font-size:clamp(17px,1.8vw,23px);line-height:1.5}.video-information .screen-heading .kicker{font-size:8px;line-height:1.8}.screen-badge{flex:none;padding:4px 6px}.screen-badge .brand-inline{height:24px}
.video-byline{display:flex;flex-wrap:wrap;gap:7px 16px;align-items:center;font:12px/1.65 'Trebuchet MS',sans-serif;color:var(--muted)}.creator-channel{font-weight:700;color:var(--ink)}.video-byline .brand-inline{height:22px}
.video-counts{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;margin:14px 0;font:13px/1.6 'Trebuchet MS',sans-serif}.video-counts strong{font-size:16px}.counter-status{font-size:11px;color:var(--muted)}
.video-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.video-actions .quiet-button{padding:7px 12px;font-size:10px;min-height:42px;border-color:#d1dbe5}.video-actions .quiet-button[aria-pressed=true]{border-color:#ed801c;background:#fff1d8;color:#153758}
.video-action-note{font:11px/1.6 'Trebuchet MS',sans-serif;color:var(--muted);margin:7px 0}.video-description{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.video-description summary{font-size:10px;cursor:pointer;min-height:30px;line-height:1.7}.video-description p{font-size:11px;line-height:1.8}.home-screen .player-status{font-size:10px;min-height:0;margin-top:6px;line-height:1.7}.home-screen .screen-mode{font-size:9px}.home-screen .screen-toolbar .quiet-button{padding:6px 10px}.home-screen #version-reference{display:block;overflow-wrap:anywhere;font:11px/1.7 'Trebuchet MS',sans-serif;margin-top:10px}
.suggestions{padding:18px 16px;border-radius:19px;background:var(--panel);color:var(--ink);border:1px solid #ffffffad;min-width:0}.suggestions h2{font-size:18px;margin:0}.suggestions>.fine{font-size:9px;margin:6px 0 18px}.suggested-video{display:grid;grid-template-columns:minmax(100px,.95fr) minmax(0,1fr);gap:10px;align-items:start;margin-bottom:20px}.suggestion-poster{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;border-radius:10px;overflow:hidden}.suggestion-play{font:16px Arial,sans-serif;color:white}.suggestion-copy{display:flex;flex-direction:column;gap:6px}.suggestion-copy strong{font-size:10px;font-weight:400;line-height:1.6}.suggestion-copy>span{font:12px/1.5 'Trebuchet MS',sans-serif;color:var(--muted)}.suggestion-copy small{font:10px/1.6 'Trebuchet MS',sans-serif;color:var(--muted)}.suggestion-copy .brand-inline{height:18px}
.hero-notes{font-size:9px;margin:0;opacity:.96}.hero-notes .brand-inline{height:25px}
.catalogue-bands{max-width:1660px;padding:0 26px 26px;margin:0 auto}.catalogue-scope{color:#fff;background:#0c3969b8;border-radius:10px;padding:10px 14px;font:11px/1.6 'Trebuchet MS',sans-serif}
.catalogue-row{padding:24px 20px;background:var(--panel);color:var(--ink);border-radius:19px;margin:18px 0;border:1px solid #ffffffad;min-width:0}.row-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.row-heading h2{font-size:17px;line-height:1.5;margin:0;display:flex;align-items:center;gap:6px}.row-heading h2 .brand-inline{height:35px}.row-controls{display:flex;align-items:center;gap:7px}.row-controls a{font-size:10px;min-height:40px;display:flex;align-items:center;white-space:nowrap}.row-controls button{width:38px;height:38px;border:1px solid var(--orange);border-radius:50%;background:#fff;color:#143859;font:24px Arial,sans-serif;min-height:38px}.row-controls button:disabled{opacity:.4;cursor:default}.catalogue-track{display:flex;gap:17px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:10px;min-width:0}.catalogue-card,.catalogue-placeholder{flex:0 0 clamp(220px,23vw,290px);scroll-snap-align:start;min-width:0}.catalogue-card .poster{border-radius:12px}.catalogue-card h3,.catalogue-placeholder h3{font-size:12px;margin:12px 0 7px}.catalogue-card p,.catalogue-placeholder p{font:12px/1.65 'Trebuchet MS',sans-serif;color:var(--muted);margin:4px 0}.catalogue-placeholder{opacity:.65}.empty-poster{display:grid;place-items:center;aspect-ratio:16/9;background:color-mix(in srgb,var(--line) 25%,var(--panel));border:1px dashed var(--line);border-radius:12px;font:24px 'Trebuchet MS',sans-serif;color:var(--muted)}
.watch-page{max-width:1660px!important;padding:24px!important}.watch-page .home-screen{padding:0}.watch-page .suggestions{border-color:var(--line)}
body>.site-footer{max-width:none;padding:28px 30px 35px;gap:24px}.site-footer p{font-size:10px}.site-footer .footer-brand{width:210px;flex-basis:210px}
html[data-theme=light] .catalogue-scope{color:var(--ink);background:#edf3f8}
@media(min-width:900px) and (max-width:1199px){:root{--rail:180px;--rail-small:72px}.site-header,html[data-theme] .site-header{padding-inline:12px;gap:7px}.site-header .brand-shell,html[data-theme] .site-header .brand-shell{width:170px;flex-basis:170px}.top-navigation{justify-content:flex-start}.top-navigation .nav-signature{min-width:118px;width:118px}.top-navigation .nav-signature:nth-child(2){min-width:140px;width:140px}.top-navigation .nav-create{width:205px;min-width:205px}.header-actions{gap:4px}.header-actions .account{min-width:106px;width:106px;font-size:10px}.header-actions .icon-button{width:38px;height:40px;min-height:40px}.screen-layout{grid-template-columns:minmax(0,2fr) minmax(205px,1fr);gap:13px}.home-screen{padding:11px}.suggestions{padding:14px 12px}.suggested-video{grid-template-columns:1fr;gap:8px}.suggestion-copy>span{display:none}.hero-introduction.intro-compact{grid-template-columns:1fr}.intro-actions{justify-content:flex-start;max-width:none}}
@media(max-width:899px){
 :root{--rail:0px;--rail-small:0px}.site-header,html[data-theme] .site-header{min-height:77px;padding:10px 12px;gap:7px}.site-header .brand-shell,html[data-theme] .site-header .brand-shell{width:172px;flex:0 1 172px;min-width:100px}.top-navigation{display:none}.header-actions{margin-left:auto;gap:5px}.header-actions>a.icon-button{display:grid}.header-actions .account{min-width:100px;width:100px;font-size:10px}.header-actions .icon-button{width:36px;height:40px;min-height:40px}
 .left-navigation,body[data-menu-mode=auto] .left-navigation,body[data-menu-mode=auto] .left-navigation[data-expanded=true]{position:relative;left:auto;top:auto;bottom:auto;width:calc(100% - 24px);margin:0 12px 12px;padding:5px 10px;border-radius:14px;box-shadow:none;max-height:none;overflow:visible;background:#fffcf7}
 .left-navigation .sidebar-controls,.left-navigation .sidebar-help{display:none!important}.left-navigation nav{display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}.sidebar-link,body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-link{display:flex;flex-direction:row;gap:6px;flex:none;padding:10px 11px;font-size:10px;text-align:left;min-height:44px;white-space:nowrap}.sidebar-link>svg{width:18px;height:18px}.sidebar-link .brand-inline{height:19px}
 body>main,body>.site-footer,body[data-menu-mode=auto]>main,body[data-menu-mode=auto]>.site-footer{margin-left:0;width:100%}.hero-introduction.intro-compact{grid-template-columns:1fr}.intro-actions{justify-content:flex-start;max-width:none;gap:7px}.homepage-hero .hero-inner.hero-grid{padding:15px 18px 22px;gap:18px}.hero-grid h1{font-size:25px}.hero-grid .hero-copy{font-size:12px}.screen-layout{grid-template-columns:minmax(0,1fr)}.suggestions{padding:15px}.suggestions h2{font-size:16px}.suggested-video{grid-template-columns:145px 1fr;gap:13px;margin-bottom:13px}.suggestion-copy strong{font-size:12px}.suggestion-copy>span{font-size:12px}.screen-poster-copy p{font-size:20px}.screen-poster .signature{width:240px}.catalogue-bands{padding:0 18px 22px}.catalogue-card,.catalogue-placeholder{flex-basis:230px}.catalogue-row{padding:18px 15px}.row-heading h2{font-size:15px}.video-information .screen-heading h2{font-size:20px}.site-footer{padding:28px 18px!important}
}
@media(max-width:540px){
 .preview-strip{padding:5px 12px;font-size:8px;letter-spacing:.05em}.preview-strip span{display:none}.site-header,html[data-theme] .site-header{padding-inline:10px;gap:5px}.site-header .brand-shell,html[data-theme] .site-header .brand-shell{width:145px;flex-basis:145px}.header-actions .icon-button{width:33px;height:38px;min-height:38px}.header-actions .account{width:89px;min-width:89px;font-size:9px}.header-actions{gap:3px}.header-actions svg{width:19px;height:19px}
 .hero-grid h1{font-size:23px}.homepage-hero .hero-inner.hero-grid{padding:10px 12px 18px}.hero-grid .eyebrow{font-size:8px}.hero-copy{max-width:360px}.intro-actions{gap:7px}.intro-actions .signature,.hero-grid .intro-actions .signature{width:186px;max-width:100%}.intro-actions .signature.create-cta,.hero-grid .intro-actions .signature.create-cta{width:236px}.intro-actions .signature>span{font-size:10.5px}.intro-actions #how-it-works{width:186px}.home-screen{padding:10px;border-radius:15px}.screen-frame{border-radius:10px}.screen-poster-copy p{font-size:15px}.screen-poster .signature{width:220px}.screen-poster .signature>span{font-size:10px}.poster-demo-label{font-size:8px}.video-information .screen-heading h2{font-size:17px}.video-byline{font-size:11px;gap:5px 12px}.video-counts{gap:5px 15px;font-size:12px;margin:11px 0}.video-counts strong{font-size:14px}.video-actions .quiet-button{font-size:9px;padding:7px 10px}.home-screen .screen-tools-body{padding-inline:0}.player-controls .signature{max-width:100%}.catalogue-bands{padding-inline:12px}.catalogue-row{padding:17px 12px}.row-heading{align-items:center;gap:8px}.row-heading h2{font-size:13px;flex-wrap:wrap}.row-heading h2 .brand-inline{height:27px}.row-controls{gap:4px}.row-controls button{width:32px;height:36px;min-height:36px}.row-controls a{font-size:9px}.catalogue-card,.catalogue-placeholder{flex-basis:225px}.suggested-video{grid-template-columns:125px 1fr}.suggestion-copy strong{font-size:11px}.screen-badge .brand-inline{height:22px}
}
@media(max-width:350px){.site-header .brand-shell,html[data-theme] .site-header .brand-shell{flex-basis:125px;width:125px}.header-actions .account{width:78px;min-width:78px;font-size:8px}.header-actions .icon-button{width:31px}.site-header,html[data-theme] .site-header{gap:3px;padding-inline:7px}.suggested-video{grid-template-columns:105px 1fr}.screen-poster .signature{width:204px}.screen-poster-copy p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.left-navigation{transition:none}.catalogue-track{scroll-behavior:auto}.signature{transition:none}}

body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-link[aria-label="Create My Own R4D video"] .sidebar-label{font-size:7px;white-space:normal}
@media(max-width:899px){body[data-menu-mode=auto] .left-navigation:not([data-expanded=true]) .sidebar-link[aria-label="Create My Own R4D video"] .sidebar-label{font-size:10px;white-space:nowrap}}