/* Desktop homepage artwork. The separate mobile hero keeps its own assets. */
.rw-hero-detailed .rw-laptop-frame {
    padding: clamp(12px, 1.3vw, 17px);
    border: 2px solid #a4aebc;
    border-radius: clamp(16px, 1.7vw, 25px) clamp(16px, 1.7vw, 25px) 7px 7px;
    background: linear-gradient(130deg, #232b36, #080c12 48%, #151c27);
    box-shadow: inset 0 0 0 1px #020509, inset 0 2px 1px #67717c,
        0 0 0 1px #26303d, 2px 3px 0 #657487, 0 8px 16px #10284024;
}

.rw-hero-detailed .rw-laptop-lid::after {
    border: 2px solid #aeb7c3;
    border-radius: clamp(16px, 1.7vw, 25px);
    background: url("Images/Logo.png?v=20260715-live") center / 14% auto no-repeat,
        linear-gradient(112deg, #ecf0f4, #a9b4c2 38%, #dce3e9 68%, #7c8b9d);
    box-shadow: inset 0 0 0 1px #ffffff90, inset -2px -3px 6px #38475b60,
        0 12px 25px #071b3430;
}

.rw-hero-detailed .rw-laptop-frame::before {
    top: 1px;
    left: 3%;
    width: 72%;
    height: 1px;
    opacity: .6;
}

.rw-hero-detailed .rw-laptop-frame::after {
    content: "R U M B L E";
    position: absolute;
    bottom: 3px;
    left: 0;
    right: 0;
    color: #a7b3c2;
    font: 500 5px/1.2 Arial, sans-serif;
    text-align: center;
    pointer-events: none;
}

.rw-hero-detailed .rw-laptop-camera {
    top: 5px;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle at 35% 30%, #99bed6 0 8%, #24455c 20%, #080d16 65%);
    box-shadow: 0 0 0 1px #373f49, 12px 0 0 -1.5px #485561;
}

.rw-hero-detailed .rw-laptop-screen {
    border: 1px solid #020810;
    border-radius: clamp(7px, .7vw, 11px);
    box-shadow: inset 0 0 20px #0008, 0 0 0 1px #394350;
}

/* Both display panels remain light surfaces when the surrounding page is dark. */
.rw-hero-detailed .rw-screen-brand-copy h1,
.rw-hero-detailed .rw-board-title {
    color: var(--rw-ink);
}

.rw-hero-detailed .rw-laptop-base {
    width: 100%;
    margin: -6px 0 0;
    height: clamp(140px, 12vw, 175px);
    border: 1px solid #aeb9c5;
    border-bottom: 4px solid #738297;
    border-radius: 5px 5px 18px 18px;
    background: linear-gradient(105deg, #d4dce4, #f0f3f6 27%, #b7c3cf 72%, #d8e0e7);
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px #f2f7fc,
        0 4px 0 #445063, 0 6px 0 #9cabbc, 0 18px 24px #08233d36;
}

/* A full-width barrel bridges the two planes at their shared pivot.
   It belongs to the lid, so it stays attached throughout the opening motion. */
.rw-hero-detailed .rw-laptop-hinge-spine {
    position: absolute;
    z-index: 8;
    left: 2%;
    right: 2%;
    bottom: -7px;
    height: 12px;
    border: 1px solid #667586;
    border-radius: 4px;
    background: linear-gradient(90deg, #bbc7d2, #657282 3%, transparent 5% 95%, #657282 97%, #bbc7d2),
        linear-gradient(#1b232d, #657382 35%, #2b3542 65%, #111a25);
    box-shadow: inset 0 1px 0 #d9e3ea80, 0 1px 1px #071b3440;
    pointer-events: none;
}

.rw-hero-detailed .rw-laptop-hinge {
    position: absolute;
    top: 0;
    left: 9%;
    right: 9%;
    height: 7%;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(#070c13, #4a5564 48%, #101822);
    box-shadow: 0 1px 1px #ffffffb0;
}

.rw-hero-detailed .rw-keyboard {
    display: flex;
    flex-direction: column;
    top: 20%;
    left: 12%;
    right: 12%;
    height: 48%;
    gap: 3px;
    padding: 4px;
    border-radius: 5px;
    background: #647181;
    box-shadow: inset 0 1px 3px #1a253b90, 0 1px 1px #fff;
}

.rw-hero-detailed .rw-keyboard-row {
    display: flex;
    flex: 1;
    gap: 3px;
    min-height: 0;
}

.rw-hero-detailed .rw-keyboard span {
    display: flex;
    flex: var(--key-size, 1);
    align-items: center;
    justify-content: center;
    min-width: 0;
    border: 1px solid #101721;
    border-radius: 2px;
    color: #dae6f3;
    font: 500 clamp(4px, .48vw, 7px)/1 Arial, sans-serif;
    background: linear-gradient(#303a47, #17202b);
    box-shadow: inset 0 1px 0 #65707e, 0 1px 1px #04101d70;
    text-shadow: 0 0 3px #bfe3ff60;
}

.rw-hero-detailed .rw-speaker {
    position: absolute;
    top: 16%;
    left: 4.5%;
    width: 4.5%;
    height: 47%;
    opacity: .6;
    background: radial-gradient(circle, #35404f 0 .7px, transparent 1px) 0 0 / 3px 3px;
}

.rw-hero-detailed .rw-speaker-right { left: auto; right: 4.5%; }

.rw-hero-detailed .rw-trackpad {
    left: 35%;
    right: 35%;
    bottom: 5%;
    height: 24%;
    border: 1px solid #8291a3;
    border-radius: 4px;
    background: linear-gradient(120deg, #c9d3de, #dce3eb);
    box-shadow: inset 0 1px 2px #62758d40, 0 1px 0 #fff;
}

.rw-hero-detailed .rw-laptop-lip {
    left: 43%;
    right: 43%;
    bottom: -4px;
    height: 5px;
    border: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(#5b6878, #b6c3d0);
    box-shadow: 0 1px 0 #edf3fa;
}

.rw-hero-detailed .rw-laptop-shadow {
    background: radial-gradient(ellipse, #152d4845, #152d4818 45%, transparent 70%);
}

/* Articulated character: one texture, joints at hips, knees, ankles,
   shoulder, elbow, wrist and neck. All artwork stays in SVG user space. */
.rw-hero-detailed .rw-presenter-figure {
    --rw-portrait-height: clamp(330px, 49vh, 390px);
    position: absolute;
    bottom: 48px;
    left: 50%;
    width: calc(var(--rw-portrait-height) * .666667);
    height: var(--rw-portrait-height);
    margin-left: calc(var(--rw-portrait-height) * -.333333);
    filter: drop-shadow(0 9px 7px #092a4226);
    transition: filter .3s ease;
}

.rw-hero-detailed .rw-presenter-figure::before {
    content: "";
    position: absolute;
    left: 18%;
    bottom: .3%;
    width: 45%;
    height: 2.2%;
    border-radius: 50%;
    background: #122b4950;
    filter: blur(4px);
}

.rw-hero-detailed .rw-presenter-rig {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rw-hero-detailed .rw-presenter-rig g {
    transform-box: view-box;
}
.rw-hero-detailed .rw-npc-root { transform-origin: 430px 1480px; }
.rw-hero-detailed .rw-npc-head { transform-origin: 434px 228px; }
.rw-hero-detailed .rw-npc-front-hip { transform-origin: 390px 786px; }
.rw-hero-detailed .rw-npc-front-knee { transform-origin: 341px 1100px; }
.rw-hero-detailed .rw-npc-front-ankle { transform-origin: 288px 1393px; }
.rw-hero-detailed .rw-npc-back-hip { transform-origin: 527px 785px; }
.rw-hero-detailed .rw-npc-back-knee { transform-origin: 535px 1096px; }
.rw-hero-detailed .rw-npc-back-ankle { transform-origin: 530px 1388px; }
.rw-hero-detailed .rw-npc-shoulder { transform-origin: 583px 318px; }
.rw-hero-detailed .rw-npc-elbow { transform-origin: 665px 493px; }
.rw-hero-detailed .rw-npc-wrist { transform-origin: 815px 468px; }