{"id":193,"date":"2024-11-19T08:05:52","date_gmt":"2024-11-19T08:05:52","guid":{"rendered":"http:\/\/justhired.ai\/clonev2\/?page_id=193"},"modified":"2026-05-26T16:19:36","modified_gmt":"2026-05-26T16:19:36","slug":"home","status":"publish","type":"page","link":"https:\/\/justhired.ai\/clonev2\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"193\" class=\"elementor elementor-193\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-49115c7 elementor-section-full_width elementor-section-height-min-height elementor-section-stretched elementor-section-height-default elementor-section-items-middle\" data-id=\"49115c7\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-807e822 exad-sticky-section-no\" data-id=\"807e822\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-0bd2f28 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"0bd2f28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\n\/* \u2500\u2500 Shared shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.jhp-outer {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    z-index: 1000;\n    background: rgba(3,3,3,0.92);\n    backdrop-filter: blur(14px);\n    -webkit-backdrop-filter: blur(14px);\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n    width: 100%;\n}\n\n\/* Offset page content for the fixed header \u2014 applies only on pages where\n   the header shortcode renders (this style block is inside the shortcode).\n   Admin-bar variants compound the bar height with the header height so\n   content doesn't draw over the bottom of the header when the user is\n   logged in. *\/\nbody { padding-top: 68px; }                       \/* desktop header = 68px *\/\nbody.admin-bar { padding-top: 100px; }            \/* + 32px admin bar *\/\n\n@media (max-width: 1024px) {\n    body { padding-top: 60px; }                   \/* mobile header = 60px *\/\n    body.admin-bar { padding-top: 92px; }         \/* + 32px admin bar *\/\n}\n\n@media (max-width: 782px) {\n    body.admin-bar { padding-top: 106px; }        \/* admin bar grows to 46px *\/\n}\n\n\/* Push header below admin bar when logged in. *\/\nbody.admin-bar .jhp-outer { top: 32px; }\n@media (max-width: 782px) {\n    body.admin-bar .jhp-outer { top: 46px; }\n}\n\n\/* \u2500\u2500 DESKTOP NAV (1025px+) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.jhp-wrap {\n    max-width: 100%;\n    margin: 0 auto;\n    height: 68px;\n    padding: 0 48px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 40px;\n    box-sizing: border-box;\n}\n.jhp-nav {\n    display: flex;\n    align-items: center;\n    gap: 2px;\n    flex: 1;\n    justify-content: center;\n    margin-right: 48px;\n}\n.jhp-link {\n    color: rgba(255,255,255,0.55);\n    text-decoration: none;\n    font-family: 'Inter', sans-serif;\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px 16px;\n    border-radius: 7px;\n    transition: color 0.18s, background 0.18s;\n    white-space: nowrap;\n}\n.jhp-link:hover { color: rgba(255,255,255,0.92); }\n.jhp-link.active {\n    color: rgba(255,255,255,0.92);\n    background: rgba(255,255,255,0.06);\n}\n.jhp-login {\n    color: rgba(255,255,255,0.38);\n    text-decoration: none;\n    font-family: 'Inter', sans-serif;\n    font-size: 14px;\n    font-weight: 500;\n    padding: 8px 12px;\n    transition: color 0.18s;\n    white-space: nowrap;\n    margin-left: 6px;\n}\n.jhp-login:hover { color: rgba(255,255,255,0.65); }\n.jhp-cta { flex-shrink: 0; }\n.jhp-cta .jh-cta-button { padding: 8px 20px !important; font-size: 12.5px !important; letter-spacing: 0.10em !important; }\n.jhp-cta .jh-cta-wrapper { width: auto !important; }\n\n\/* Hide desktop nav on mobile\/tablet *\/\n@media (max-width: 1024px) {\n    .jhp-wrap { display: none; }\n}\n\n\/* \u2500\u2500 MOBILE NAV (\u22641024px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n.jhm-wrap {\n    display: none; \/* shown via media query below *\/\n    height: 60px;\n    padding: 0 20px;\n    align-items: center;\n    justify-content: space-between;\n    box-sizing: border-box;\n}\n\n@media (max-width: 1024px) {\n    .jhm-wrap { display: flex; }\n}\n\n\/* Logo *\/\n.jhm-logo img {\n    width: 150px;\n    height: auto;\n    display: block;\n}\n\n\/* Hamburger button *\/\n.jhm-burger {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    width: 24px;\n    height: 17px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    padding: 0;\n    flex-shrink: 0;\n}\n.jhm-burger span {\n    display: block;\n    height: 2px;\n    width: 100%;\n    background: rgba(255,255,255,0.78);\n    border-radius: 1px;\n    transition: transform 0.25s ease, opacity 0.2s ease;\n}\n.jhm-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }\n.jhm-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }\n.jhm-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }\n\n\/* Dropdown menu *\/\n.jhm-menu {\n    display: none;\n    flex-direction: column;\n    background: rgba(3,3,3,0.98);\n    border-top: 1px solid rgba(255,255,255,0.06);\n    border-bottom: 1px solid rgba(255,255,255,0.06);\n    padding: 6px 0 14px;\n    animation: jhm-in 0.18s ease;\n}\n.jhm-menu.open { display: flex; }\n\n@keyframes jhm-in {\n    from { opacity: 0; transform: translateY(-6px); }\n    to   { opacity: 1; transform: translateY(0); }\n}\n\n\/* Dropdown links *\/\n.jhm-link {\n    display: block;\n    padding: 14px 24px;\n    color: rgba(255,255,255,0.62);\n    text-decoration: none;\n    font-family: 'Inter', sans-serif;\n    font-size: 15px;\n    font-weight: 500;\n    border-bottom: 1px solid rgba(255,255,255,0.04);\n    transition: color 0.15s, background 0.15s;\n}\n.jhm-link:hover { color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.03); }\n.jhm-link:last-of-type { border-bottom: none; }\n.jhm-login-link {\n    color: rgba(255,255,255,0.35);\n    font-size: 14px;\n}\n\n\/* CTA in dropdown *\/\n.jhm-cta-wrap {\n    padding: 12px 20px 2px;\n}\n.jhm-cta-wrap .jh-cta-button  { max-width: none !important; width: 100% !important; }\n.jhm-cta-wrap .jh-cta-wrapper { width: 100% !important; }\n<\/style>\n\n<!-- \u2500\u2500 DESKTOP NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<div class=\"jhp-outer\" id=\"jh-nav-outer\">\n  <div class=\"jhp-wrap\">\n    <a href=\"https:\/\/justhired.ai\/clonev2\/\" style=\"display:inline-flex;align-items:center;flex-shrink:0;text-decoration:none;\">\n      <img decoding=\"async\" src=\"http:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/01\/Just-Hiredword-mark-1.webp\"\n           alt=\"Just Hired\" style=\"width:180px;height:auto;display:block;\">\n    <\/a>\n    <nav class=\"jhp-nav\">\n      <a href=\"https:\/\/justhired.ai\/clonev2\/features\"     class=\"jhp-link\">Features<\/a>\n      <a href=\"https:\/\/justhired.ai\/clonev2\/how-it-works\" class=\"jhp-link\">How It Works<\/a>\n      <a href=\"https:\/\/justhired.ai\/clonev2\/extension\"    class=\"jhp-link\">Extension<\/a>\n      <a href=\"https:\/\/justhired.ai\/clonev2\/pricing\"      class=\"jhp-link\">Pricing<\/a>\n      <a href=\"https:\/\/app.justhired.ai\/login_returning\" class=\"jhp-login\">Login<\/a>\n    <\/nav>\n    <div class=\"jhp-cta\">\n                  <style>\r\n                .jh-cta-wrapper {\r\n                    display: inline-flex;\r\n                    flex-direction: column;\r\n                    align-items: center;\r\n                    box-sizing: border-box;\r\n                }\r\n\r\n                .jh-cta-wrapper.full-width {\r\n                    display: flex;\r\n                    width: 100%;\r\n                    max-width: none;\r\n                }\r\n\r\n                .jh-cta-button {\r\n                    font-family: var(--jh-font-tight);\r\n                    font-size: 15px;\r\n                    font-weight: 600;\r\n                    letter-spacing: 0.12em;\r\n                    text-transform: uppercase;\r\n                    color: #ffffff;\r\n                    text-decoration: none;\r\n                    text-align: center;\r\n                    position: relative;\r\n                    display: inline-block;\r\n                    background: transparent;\r\n                    border: 1.5px solid rgba(79, 172, 254, 0.3);\r\n                    border-radius: 10px;\r\n                    padding: 14px 32px;\r\n                    cursor: pointer;\r\n                    width: auto;\r\n                    max-width: none;\r\n                    white-space: nowrap;\r\n                    box-sizing: border-box;\r\n                    outline: none;\r\n                    overflow: hidden;\r\n                    z-index: 1;\r\n                    box-shadow: 0 0 3px rgba(79, 172, 254, 0.6) !important;\r\n                    transition: color 0.3s ease, \r\n                                letter-spacing 0.3s ease, \r\n                                border-color 0.3s ease, \r\n                                box-shadow 0.3s ease, \r\n                                transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;\r\n                }\r\n\r\n                .jh-cta-wrapper.full-width .jh-cta-button {\r\n                    width: 100%;\r\n                    max-width: none;\r\n                }\r\n\r\n                .mobile-text { display: none; }\r\n\r\n                .jh-cta-button::before {\r\n                    content: \"\";\r\n                    position: absolute;\r\n                    top: 50%;\r\n                    left: 50%;\r\n                    width: 200%;\r\n                    height: 200%;\r\n                    transform: translate(-50%, -50%);\r\n                    background: conic-gradient(\r\n                        from 0deg,\r\n                        #ffffff 0deg,\r\n                        #4facfe 40deg,\r\n                        rgba(79, 172, 254, 0.2) 70deg,\r\n                        transparent 100deg,\r\n                        transparent 360deg\r\n                    );\r\n                    animation: clockwiseRotation 3.5s linear infinite;\r\n                    pointer-events: none;\r\n                    z-index: -2;\r\n                    filter: blur(1px);\r\n                }\r\n\r\n                .jh-cta-button::after {\r\n                    content: \"\";\r\n                    position: absolute;\r\n                    inset: 1.5px;\r\n                    background: #0A0E14;\r\n                    border-radius: 8.5px;\r\n                    z-index: -1;\r\n                    transition: background var(--jh-transition-slow);\r\n                }\r\n\r\n                @keyframes clockwiseRotation {\r\n                    from { transform: translate(-50%, -50%) rotate(0deg); }\r\n                    to { transform: translate(-50%, -50%) rotate(360deg); }\r\n                }\r\n\r\n                .jh-cta-button:hover {\r\n                    color: #60B0FF !important;\r\n                    letter-spacing: 0.15em;\r\n                    border-color: rgba(79, 172, 254, 0.5);\r\n                    box-shadow: 0 0 20px rgba(79, 172, 254, 0.2);\r\n                    transform: scale(1.05);\r\n                }\r\n\r\n                .jh-cta-button:active {\r\n                    transform: scale(0.98);\r\n                }\r\n\r\n                .jh-cta-button:focus-visible {\r\n                    outline: 2px solid var(--jh-text);\r\n                    outline-offset: 4px;\r\n                }\r\n\r\n                @media (max-width: 767px) {\r\n                    .desktop-text { display: none; }\r\n                    .mobile-text { display: inline; }\r\n                    \r\n                    .jh-cta-button {\r\n                        padding: 14px 16px;\r\n                        font-size: 13px;\r\n                        line-height: 1.2;\r\n                        white-space: nowrap;\r\n                        width: auto;\r\n                        max-width: none;\r\n                    }\r\n                }\r\n            <\/style>\r\n                    <div class=\"jh-cta-wrapper\">\r\n            <a href=\"https:\/\/app.justhired.ai\/\" class=\"jh-cta-button\">\r\n                <span class=\"desktop-text\">Start Free<\/span>\r\n                <span class=\"mobile-text\">Start Free<\/span>\r\n            <\/a>\r\n        <\/div>\r\n        \n    <\/div>\n  <\/div>\n\n  <!-- \u2500\u2500 MOBILE NAV \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  <div class=\"jhm-wrap\">\n    <a href=\"https:\/\/justhired.ai\/clonev2\/\" class=\"jhm-logo\" style=\"text-decoration:none;\">\n      <img decoding=\"async\" src=\"http:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/01\/Just-Hiredword-mark-1.webp\"\n           alt=\"Just Hired\">\n    <\/a>\n    <button class=\"jhm-burger\"\n            id=\"jh-burger\"\n            aria-label=\"Toggle navigation\"\n            aria-expanded=\"false\"\n            aria-controls=\"jh-mobile-menu\">\n      <span><\/span>\n      <span><\/span>\n      <span><\/span>\n    <\/button>\n  <\/div>\n\n  <!-- Mobile dropdown \u2014 inside .jhp-outer so sticky context is shared -->\n  <div class=\"jhm-menu\"\n       id=\"jh-mobile-menu\"\n       aria-hidden=\"true\"\n       role=\"navigation\"\n       aria-label=\"Mobile navigation\">\n    <a href=\"https:\/\/justhired.ai\/clonev2\/features\"     class=\"jhm-link\">Features<\/a>\n    <a href=\"https:\/\/justhired.ai\/clonev2\/how-it-works\" class=\"jhm-link\">How It Works<\/a>\n    <a href=\"https:\/\/justhired.ai\/clonev2\/extension\"    class=\"jhm-link\">Extension<\/a>\n    <a href=\"https:\/\/justhired.ai\/clonev2\/pricing\"      class=\"jhm-link\">Pricing<\/a>\n    <a href=\"https:\/\/app.justhired.ai\/login_returning\"\n       class=\"jhm-link jhm-login-link\">Login<\/a>\n    <div class=\"jhm-cta-wrap\">\n              <div class=\"jh-cta-wrapper full-width\">\r\n            <a href=\"https:\/\/app.justhired.ai\/\" class=\"jh-cta-button\">\r\n                <span class=\"desktop-text\">Start Free<\/span>\r\n                <span class=\"mobile-text\">Start Free<\/span>\r\n            <\/a>\r\n        <\/div>\r\n        \n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n(function () {\n    var burger = document.getElementById('jh-burger');\n    var menu   = document.getElementById('jh-mobile-menu');\n    if (!burger || !menu) return;\n\n    function openMenu()  {\n        menu.classList.add('open');\n        burger.classList.add('open');\n        burger.setAttribute('aria-expanded', 'true');\n        menu.setAttribute('aria-hidden', 'false');\n    }\n    function closeMenu() {\n        menu.classList.remove('open');\n        burger.classList.remove('open');\n        burger.setAttribute('aria-expanded', 'false');\n        menu.setAttribute('aria-hidden', 'true');\n    }\n    function toggle() { menu.classList.contains('open') ? closeMenu() : openMenu(); }\n\n    burger.addEventListener('click', toggle);\n\n    \/\/ Close on outside click\n    document.addEventListener('click', function (e) {\n        var outer = document.getElementById('jh-nav-outer');\n        if (menu.classList.contains('open') && outer && !outer.contains(e.target)) {\n            closeMenu();\n        }\n    });\n\n    \/\/ Close when a nav link is tapped\n    menu.querySelectorAll('.jhm-link').forEach(function (link) {\n        link.addEventListener('click', closeMenu);\n    });\n\n    \/\/ Close on Escape\n    document.addEventListener('keydown', function (e) {\n        if (e.key === 'Escape' && menu.classList.contains('open')) {\n            closeMenu();\n            burger.focus();\n        }\n    });\n})();\n<\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4e0e710 elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"4e0e710\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-cf9d2d3 exad-sticky-section-no\" data-id=\"cf9d2d3\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-cc9f226 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"cc9f226\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div id=\"jh_ladder_muPIpS\" class=\"hero-wp-wrapper\" data-jh-component=\"Ladder\" role=\"region\" aria-label=\"Career Command Center\">\n    <div class=\"hero-container\">\n        <div class=\"mouse-glow-layer\" aria-hidden=\"true\"><\/div>\n        <canvas class=\"abstract-animation\" role=\"presentation\"><\/canvas>\n        <div class=\"hero-text\">\n            <div class=\"title-group\">\n                <span class=\"jh-small-tag mono uppercase\">AI Career Engine<\/span>\n                <h1 class=\"hero-title\">\n                    <span class=\"line-1\">Know Your Gaps<\/span>\n                    <span class=\"line-2\">Before the <span class=\"gradient-text\">Recruiter Does.<\/span><\/span>\n                <\/h1>\n            <\/div>\n\n            <!-- Sentence: midpoint between rung-1 (25%) and rung-2 (55%) = 40% -->\n            <div class=\"mechanism-sentence\">\n                <p class=\"mechanism-line\">\n                    <span class=\"ml-line\">AI that flips your gaps into<\/span>\n                    <span class=\"ml-stand\">Interviews<\/span>\n                    <span class=\"ml-line\">not rejections<\/span>\n                <\/p>\n            <\/div>\n\n            <!-- Pills: midpoint between rung-2 (55%) and CTA (85%) = 70% -->\n            <div class=\"mechanism-pills\">\n                <span class=\"mech-pill\">\n                    <svg class=\"pill-icon\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><polygon points=\"5,1 9,3.5 9,6.5 5,9 1,6.5 1,3.5\"\/><\/svg>\n                    Gap Analysis\n                <\/span>\n                <span class=\"mech-pill\">\n                    <svg class=\"pill-icon\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><polygon points=\"5,1 9,3.5 9,6.5 5,9 1,6.5 1,3.5\"\/><\/svg>\n                    Insider Intel\n                <\/span>\n                <span class=\"mech-pill\">\n                    <svg class=\"pill-icon\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><polygon points=\"5,1 9,3.5 9,6.5 5,9 1,6.5 1,3.5\"\/><\/svg>\n                    Tailored Resume\n                <\/span>\n                <span class=\"mech-pill\">\n                    <svg class=\"pill-icon\" viewBox=\"0 0 10 10\" aria-hidden=\"true\"><polygon points=\"5,1 9,3.5 9,6.5 5,9 1,6.5 1,3.5\"\/><\/svg>\n                    AI Form Fill\n                <\/span>\n            <\/div>\n\n            <div class=\"cta-container\">\n                <div class=\"cta-wrapper\">\n                    <button class=\"cta-button\">\n                        See How You Stack Up \u2192\n                    <\/button>\n                    <span class=\"system-ready\">System Ready<\/span>\n                <\/div>\n                <span class=\"micro-copy\">Free to start<span class=\"micro-sep\"> &middot; <\/span><br class=\"micro-br\">58-second setup<span class=\"micro-sep\"> &middot; <\/span><br class=\"micro-br\">No credit card<\/span>\n                <div class=\"proof-bar\">\n                    <div class=\"proof-stat\">\n                        <span class=\"proof-num\">9<span class=\"proof-unit\">X<\/span><\/span>\n                        <span class=\"proof-desc\">Interview Rate<\/span>\n                    <\/div>\n                    <div class=\"proof-divider\"><\/div>\n                    <div class=\"proof-stat\">\n                        <span class=\"proof-num\">58<span class=\"proof-unit\">s<\/span><\/span>\n                        <span class=\"proof-desc\">Resume Tailored<\/span>\n                    <\/div>\n                    <div class=\"proof-divider\"><\/div>\n                    <div class=\"proof-stat\">\n                        <span class=\"proof-num\">90<span class=\"proof-unit\">%+<\/span><\/span>\n                        <span class=\"proof-desc\">ATS Match Score<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n#jh_ladder_muPIpS.hero-wp-wrapper {\n    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    --active-glow: #0554F2;\n    --status-tag-text: #ffffff;\n    --any-value-hovered: 0;\n    margin-bottom: -20px !important;\n    padding-bottom: 0 !important;\n    position: relative;\n    z-index: 10;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .hero-container {\n    position: relative;\n    width: 100%;\n    height: 100vh;\n    height: 100svh;\n    overflow: hidden;\n    background-color: #000;\n    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);\n    box-sizing: border-box;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .hero-container::after {\n    content: \"\";\n    position: absolute;\n    top: 0; left: 0; width: 100%; height: 100%;\n    background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'\/%3E%3C\/svg%3E\");\n    opacity: 0.04;\n    pointer-events: none;\n    z-index: 5;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .abstract-animation,\n#jh_ladder_muPIpS.hero-wp-wrapper .hero-text {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .abstract-animation {\n    z-index: 1;\n    opacity: 1;\n    transition: opacity 2s ease-in;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .hero-text {\n    text-align: center;\n    color: #fff;\n    pointer-events: none;\n    z-index: 2;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .title-group,\n#jh_ladder_muPIpS.hero-wp-wrapper .ladder-group-1,\n#jh_ladder_muPIpS.hero-wp-wrapper .ladder-group-2,\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-sentence,\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-pills,\n#jh_ladder_muPIpS.hero-wp-wrapper .emphasize {\n    transform: translate(-50%, -50%);\n    transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);\n    position: absolute;\n    left: 50%;\n    width: 100%;\n    white-space: nowrap;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    opacity: 0; \/* JS will reveal *\/\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .hero-visible {\n    opacity: 1 !important;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .title-group {\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    width: 100% !important;\n    left: 50% !important;\n    transform: translate(-50%, -50%) !important;\n    top: var(--title-top-p, 10%);\n    gap: 4px !important;\n    position: absolute !important;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .jh-small-tag {\n    font-size: 11px !important;\n    letter-spacing: 0.4em !important;\n    color: #60B0FF !important;\n    border: 1px solid rgba(96, 176, 255, 0.3) !important;\n    padding: 3px 12px !important;\n    border-radius: 4px !important;\n    background: rgba(5, 84, 242, 0.05) !important;\n    white-space: nowrap !important;\n}\n\n\/* AI CAREER ENGINE tag \u2014 elevated to match pill style on mobile *\/\n@media (max-width: 768px) {\n    #jh_ladder_muPIpS.hero-wp-wrapper .jh-small-tag {\n        font-size: 10px !important;\n        letter-spacing: 0.25em !important;\n        color: #ffffff !important;\n        border: 1px solid rgba(5, 84, 242, 0.45) !important;\n        padding: 8px 18px !important;\n        border-radius: 6px !important;\n        background: rgba(5, 84, 242, 0.10) !important;\n        text-shadow: 0 0 10px rgba(96, 176, 255, 0.5) !important;\n        box-shadow: 0 0 16px rgba(5, 84, 242, 0.12),\n                    inset 0 0 10px rgba(5, 84, 242, 0.05) !important;\n    }\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .ladder-group-1,\n#jh_ladder_muPIpS.hero-wp-wrapper .ladder-group-2 {\n    font-size: 10px;\n    letter-spacing: 0.3em;\n    color: rgba(255, 255, 255, 0.5);\n    gap: 4px;\n    font-weight: 800;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .ladder-group-1 { top: var(--ladder-1-top-p, 25%); }\n#jh_ladder_muPIpS.hero-wp-wrapper .ladder-group-2 { top: var(--ladder-2-top-p, 55%); }\n\n\/* \u2500\u2500 Mechanism sentence: midpoint of rung-1 (25%) \u2192 rung-2 (55%) = 40% \u2500\u2500 *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-sentence {\n    position: absolute;\n    left: 50%;\n    top: 40%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    max-width: 780px;\n    padding: 0 40px;\n    box-sizing: border-box;\n    white-space: normal !important;\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    z-index: 2;\n}\n\n\/* \u2500\u2500 Mechanism pills: midpoint of rung-2 (55%) \u2192 CTA (85%) = 70%\n   Centering math mirrors original value-group\/emphasize pattern:\n   left:50% + translate(-50%,-50%) + justify-content:center = true viewport center \u2500\u2500 *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-pills {\n    position: absolute;\n    left: 50%;\n    top: 65%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    max-width: 900px;\n    padding: 0 20px;\n    box-sizing: border-box;\n    display: flex !important;\n    flex-direction: row !important;\n    flex-wrap: wrap;\n    gap: 12px;\n    align-items: center !important;\n    justify-content: center !important;\n    white-space: normal !important;\n    z-index: 2;\n}\n\n\/* Mechanism sentence \u2014 desktop: single line with spans inline *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line {\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace;\n    font-size: clamp(12px, 1.4vw, 15px);\n    font-weight: 600;\n    color: rgba(255, 255, 255, 0.88);\n    line-height: 1.6;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    text-align: center;\n    margin: 0;\n    padding: 0;\n    border: none;\n    text-shadow:\n        0 0 20px rgba(5, 84, 242, 0.5),\n        0 0 40px rgba(5, 84, 242, 0.2);\n    max-width: 700px;\n}\n\n\/* Desktop: spans inline with separators *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line .ml-line,\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line .ml-stand {\n    display: inline;\n}\n#jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line .ml-line:not(:last-child)::after {\n    content: '   \u2014   '; \/* em dash separator on desktop *\/\n}\n\n\/* Mobile: 3-line stack *\/\n@media (max-width: 768px) {\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 4px;\n        font-size: 14px;\n        line-height: 1.5;\n        text-shadow: none;\n    }\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line .ml-line,\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line .ml-stand {\n        display: block;\n    }\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line .ml-line:not(:last-child)::after {\n        content: ''; \/* Remove em dash on mobile *\/\n    }\n    \/* YOU STAND: gradient + larger, echoes headline treatment *\/\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-line .ml-stand {\n        font-size: 20px;\n        font-weight: 800;\n        letter-spacing: 0.15em;\n        background: linear-gradient(90deg, #0554F2, #60B0FF);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n        text-shadow: none;\n        filter: drop-shadow(0 0 12px rgba(5, 84, 242, 0.5));\n        margin: 2px 0;\n    }\n}\n\n\n\n#jh_ladder_muPIpS.hero-wp-wrapper .mech-pill {\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.2em;\n    text-transform: uppercase;\n    color: #ffffff;\n    background: rgba(5, 84, 242, 0.18);\n    border: 1px solid rgba(96, 176, 255, 0.7);\n    border-radius: 6px;\n    padding: 12px 22px 12px 16px;\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    white-space: nowrap;\n    text-shadow: 0 0 14px rgba(96, 176, 255, 0.85);\n    box-shadow:\n        0 0 28px rgba(5, 84, 242, 0.4),\n        inset 0 0 16px rgba(5, 84, 242, 0.18);\n    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;\n    pointer-events: auto;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .pill-icon {\n    width: 12px;\n    height: 12px;\n    fill: rgba(96, 176, 255, 0.55);\n    stroke: #ffffff;\n    stroke-width: 1.5;\n    opacity: 1;\n    flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-pills {\n        gap: 8px;\n        padding: 0 12px;\n        max-width: 100vw;\n    }\n    #jh_ladder_muPIpS.hero-wp-wrapper .mech-pill {\n        font-size: 10px;\n        padding: 12px 16px 12px 12px;\n        gap: 9px;\n        flex: 1 1 calc(50% - 4px); \/* Two per row, equal width, no overflow *\/\n        justify-content: center;\n        max-width: calc(50% - 4px);\n    }\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper h1 {\n    font-family: 'Inter Tight', sans-serif !important;\n    line-height: 1.1 !important;\n    margin: 0 !important;\n    display: flex !important;\n    flex-direction: column !important;\n    align-items: center !important;\n    gap: 5px !important;\n    color: #ffffff !important;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper h1 .line-1 {\n    font-size: clamp(32px, 8vw, 64px) !important;\n    font-weight: 800 !important;\n    color: #ffffff !important;\n    text-shadow: 0 0 10px rgba(5, 84, 242, 0.4), 0 0 20px rgba(5, 84, 242, 0.2) !important;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper h1 .line-2 {\n    font-size: clamp(20px, 4.5vw, 32px) !important;\n    font-weight: 800 !important;\n    opacity: 0.9 !important;\n    letter-spacing: 0.05em !important;\n    color: #ffffff !important;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .gradient-text {\n    background: linear-gradient(90deg, #0554F2, #60B0FF);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    display: inline-block;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .mono { font-family: 'Geist Mono', monospace; }\n#jh_ladder_muPIpS.hero-wp-wrapper .uppercase { text-transform: uppercase; }\n\n\n\/* \u2500\u2500 Proof bar \u2500\u2500 *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .proof-bar {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 32px;\n    margin-top: 20px;\n    padding-top: 20px;\n    border-top: 1px solid rgba(255,255,255,0.07);\n    width: 100%;\n    max-width: var(--ladder-bottom-width, 380px);\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .proof-stat {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 3px;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .proof-num {\n    font-family: 'Inter Tight', sans-serif;\n    font-size: 26px;\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    color: #ffffff;\n    line-height: 1;\n    text-shadow: 0 0 16px rgba(5, 84, 242, 0.5);\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .proof-unit {\n    font-size: 17px;\n    color: #60B0FF;\n    font-weight: 800;\n    text-shadow: 0 0 12px rgba(96, 176, 255, 0.6);\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .proof-desc {\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace;\n    font-size: 8px;\n    letter-spacing: 0.18em;\n    color: rgba(255, 255, 255, 0.65);\n    text-transform: uppercase;\n    white-space: nowrap;\n    text-shadow: 0 0 8px rgba(5, 84, 242, 0.3);\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .proof-divider {\n    width: 1px;\n    height: 32px;\n    background: rgba(5, 84, 242, 0.35);\n    flex-shrink: 0;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .cta-container {\n    opacity: 0;\n    position: absolute;\n    left: 0;\n    top: var(--cta-top-p, 85%);\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    z-index: 10;\n    pointer-events: auto;\n    padding: 0 20px;\n    box-sizing: border-box;\n    transition: opacity 1.2s ease-out;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .cta-visible {\n    opacity: 1 !important;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .cta-wrapper {\n    position: relative !important;\n    display: inline-flex !important;\n    justify-content: center;\n    width: auto !important;\n    max-width: var(--ladder-bottom-width, 380px);\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .cta-button {\n    font-family: 'Inter Tight', sans-serif;\n    position: relative;\n    padding: 16px 32px;\n    background: rgba(2, 2, 6, 0.97); \/* Near-opaque \u2014 kills canvas bleed *\/\n    border: 1.5px solid var(--active-glow);\n    color: #fff;\n    font-size: clamp(16px, 4vw, 18px);\n    font-weight: 600;\n    text-transform: uppercase;\n    cursor: pointer;\n    border-radius: 12px;\n    width: 100%;\n    \/* Refined shadow: border glow only, no spill into canvas *\/\n    box-shadow:\n        0 0 0 1px rgba(5, 84, 242, 0.15),\n        0 0 16px rgba(5, 84, 242, 0.25),\n        0 4px 24px rgba(0, 0, 0, 0.6); \/* Dark halo separates from canvas *\/\n    transition: all 0.3s ease;\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .cta-button:hover {\n    background: rgba(5, 84, 242, 0.08);\n    box-shadow:\n        0 0 0 1px rgba(5, 84, 242, 0.5),\n        0 0 20px rgba(5, 84, 242, 0.3),\n        0 0 40px rgba(5, 84, 242, 0.12),\n        0 4px 24px rgba(0, 0, 0, 0.5);\n    filter: brightness(1.08); \/* Subtle lift, not a flash *\/\n    transform: translateY(-2px);\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .system-ready {\n    font-family: 'Geist Mono', monospace;\n    position: absolute;\n    top: 0;\n    right: 0;\n    left: auto !important;\n    transform: translate(0, -50%);\n    font-size: 9px;\n    color: #fff;\n    background: var(--active-glow);\n    padding: 3px 10px;\n    border-radius: 4px;\n    text-transform: uppercase;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    z-index: 11;\n    box-shadow: 0 2px 10px rgba(0,0,0,0.5);\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .system-ready::before {\n    content: '';\n    width: 6px;\n    height: 6px;\n    background: #00ff88;\n    border-radius: 50%;\n    box-shadow: 0 0 12px #00ff88, 0 0 20px rgba(0, 255, 136, 0.4) !important;\n    animation: statusDotPulse 2s infinite !important; \/* Cleaned this up *\/\n}\n\n@keyframes statusDotPulse {\n    0%, 100% { transform: scale(1); opacity: 1; }\n    50% { transform: scale(1.4); opacity: 0.6; }\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .micro-copy {\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace;\n    font-size: 10px;\n    color: rgba(255, 255, 255, 0.75);\n    text-transform: uppercase;\n    letter-spacing: 0.18em;\n    margin-top: 8px;\n    margin-bottom: 6px;\n    text-shadow: 0 0 12px rgba(5, 84, 242, 0.4);\n}\n\n\/* Hide line breaks on desktop *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .micro-copy .micro-br { display: none; }\n\n@media (max-width: 768px) {\n    \/* Show line breaks on mobile \u2014 stack 3 lines cleanly *\/\n    #jh_ladder_muPIpS.hero-wp-wrapper .micro-copy .micro-br { display: block !important; }\n    \/* Hide dot separators on mobile since lines are stacked *\/\n    #jh_ladder_muPIpS.hero-wp-wrapper .micro-copy .micro-sep { display: none !important; }\n    \/* Micro-copy: full brightness *\/\n    #jh_ladder_muPIpS.hero-wp-wrapper .micro-copy {\n        color: rgba(255, 255, 255, 0.9) !important;\n        font-size: 11px !important;\n        letter-spacing: 0.14em !important;\n        text-shadow: 0 0 14px rgba(5, 84, 242, 0.5) !important;\n        line-height: 1.9 !important;\n        text-align: center !important;\n        \/* Replace \u00b7 separators with line breaks via word-spacing trick \u2014\n           handled in HTML via <br> approach below via CSS content *\/\n        white-space: pre-line !important;\n    }\n    \/* Proof bar: hide on mobile \u2014 below safe area, above fold preferred *\/\n    #jh_ladder_muPIpS.hero-wp-wrapper .proof-bar {\n        display: none !important;\n    }\n}\n\n@media (max-width: 768px) {\n    #jh_ladder_muPIpS.hero-wp-wrapper h1 { padding: 0 15px; }\n\n    \/* Canvas: reduce opacity on mobile \u2014 rails and sway read quieter,\n       horizontal lines remain visible. Adjust value if lines feel too dim. *\/\n    #jh_ladder_muPIpS.hero-wp-wrapper .abstract-animation {\n        opacity: 0.35 !important;\n    }\n}\n\n\/* \u2500\u2500 MOBILE: reveal all hero elements immediately \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   On mobile, window.load fires late (slow connections) making elements\n   appear only after the user scrolls. Bypass JS stagger entirely \u2014\n   all elements visible at paint. Desktop stagger sequence is untouched. *\/\n@media (max-width: 768px) {\n    #jh_ladder_muPIpS.hero-wp-wrapper .title-group,\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-sentence,\n    #jh_ladder_muPIpS.hero-wp-wrapper .mechanism-pills {\n        opacity: 1 !important;\n    }\n    #jh_ladder_muPIpS.hero-wp-wrapper .cta-container {\n        opacity: 1 !important;\n    }\n}\n\n\/* 1. NEUTRALIZE THEME PADDING (Prevents the vertical shift) *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .hero-container {\n    max-height: 100vh !important;\n    max-height: 100svh !important;\n    padding-top: 0 !important;\n    padding-bottom: 0 !important;\n    margin-top: 0 !important;\n}\n\n\/* 2. VIEWPORT LOCK (Ensures the title stays at exactly 10% of the screen) *\/\n#jh_ladder_muPIpS.hero-wp-wrapper .title-group {\n    position: absolute !important;\n    top: 6% !important; \/* Forces the keystone position regardless of theme logic *\/\n    transform: translate(-50%, 0) !important; \/* Only center horizontally, top is fixed *\/\n    height: auto !important;\n    z-index: 99 !important;\n}\n\n\/* 3. MOBILE SAFETY (Prevents clipping on small screens) *\/\n@media (max-width: 768px) {\n    #jh_ladder_muPIpS.hero-wp-wrapper .title-group {\n        top: 8% !important;\n        gap: 14px !important; \/* More breathing room between tag and headline *\/\n    }\n}\n\n#jh_ladder_muPIpS.hero-wp-wrapper .mouse-glow-layer {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 2 !important;\n    pointer-events: none;\n    \/* REFINED: Smaller 350px circle with a tighter, more subtle gradient *\/\n    background: radial-gradient(\n        350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), \n        rgba(5, 84, 242, 0.12) 0%, \n        rgba(5, 84, 242, 0.05) 40%,\n        transparent 80%\n    ) !important;\n    transition: background 0.15s ease-out;\n}\n<\/style>\n\n<script>\n(function() {\n    \/\/ 1. Mouse Tracking for the Glow Layer\n    document.addEventListener('mousemove', (e) => {\n        const hero = document.getElementById('jh_ladder_muPIpS');\n        if (!hero) return;\n        \n        const x = (e.clientX \/ window.innerWidth) * 100;\n        const y = (e.clientY \/ window.innerHeight) * 100;\n        \n        hero.style.setProperty('--mouse-x', x + '%');\n        hero.style.setProperty('--mouse-y', y + '%');\n    });\n\n    \/\/ 2. Component Initialization \u2014 staggered reveal\n    window.addEventListener('load', () => {\n        const hero = document.getElementById('jh_ladder_muPIpS');\n        if (!hero) return;\n\n        \/\/ Stagger: title \u2192 sentence \u2192 pills \u2192 cta\n        \/\/ Mirrors original: title-group \u2192 value-group \u2192 emphasize \u2192 cta-container\n        const sequence = [\n            '.title-group',\n            '.mechanism-sentence',\n            '.mechanism-pills',\n            '.cta-container'\n        ];\n\n        sequence.forEach((selector, i) => {\n            const el = hero.querySelector(selector);\n            if (!el) return;\n            setTimeout(() => {\n                el.classList.add('hero-visible');\n                el.classList.add('cta-visible');\n            }, i * 180);\n        });\n    });\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0565f12 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"0565f12\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n<div id=\"jh_proof_MROOa7\" class=\"jh-social-proof-wrapper\" role=\"region\" aria-label=\"Client trust indicators\" data-jh-component=\"SocialProof\">\r\n    <div class=\"jh-social-proof-bar\"> \r\n        <div class=\"jh-proof-container\" style=\"flex-direction:column;gap:22px\">\r\n            <div class=\"jh-proof-text\">\r\n                Trusted by <span class=\"jh-tech-data\">50,000+<\/span> candidates at\r\n            <\/div>\r\n            <div class=\"jh-version-tag\">SYSTEM_O_S \/ V1.1.2_STANDALONE<\/div>\r\n            <div class=\"jh-proof-logos\"> \r\n                <div class=\"jh-logo-slot\">\r\n                    <div class=\"jh-logo-track jh-track-1\">\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Apple\"><path d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Apple<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Google\"><path d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\/><path d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-1 .67-2.28 1.07-3.71 1.07-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\/><path d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z\"\/><path d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Google<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Microsoft\"><path d=\"M2 2h9v9H2V2zm11 0h9v9h-9V2zM2 13h9v9H2v-9zm11 0h9v9h-9v-9z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Microsoft<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Visa\"><path d=\"M9.112 8.262L5.97 15.758H3.92L2.374 9.775c-.094-.368-.175-.503-.461-.658C1.447 8.864.677 8.627 0 8.479l.046-.217h3.3a.904.904 0 01.894.764l.817 4.338 2.018-5.102zm8.033 5.049c.008-1.979-2.736-2.088-2.717-2.972.006-.269.262-.555.822-.628a3.66 3.66 0 011.913.336l.34-1.59a5.207 5.207 0 00-1.814-.333c-1.917 0-3.266 1.02-3.278 2.479-.012 1.079.963 1.68 1.698 2.04.756.367 1.01.603 1.006.931-.005.504-.602.725-1.16.734-.975.015-1.54-.263-1.992-.473l-.351 1.642c.453.208 1.289.39 2.156.398 2.037 0 3.37-1.006 3.377-2.564m5.061 2.447H24l-1.565-7.496h-1.656a.883.883 0 00-.826.55l-2.909 6.946h2.036l.405-1.12h2.488zm-2.163-2.656l1.02-2.815.588 2.815zm-8.16-4.84l-1.603 7.496H8.34l1.605-7.496z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Visa<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Nvidia\"><path d=\"M8.948 8.798v-1.43a6.7 6.7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851c-.398 0-.787-.062-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6.016 6.016 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964c-.37 0-.733-.035-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Nvidia<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Cisco\"><path d=\"M16.331 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.186 1.186 0 01-.806-.237 1.038 1.038 0 01-.352-.498 1.21 1.21 0 01-.023-.667c.052-.225.178-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.34 2.34 0 00-.903.206c-.287.132-.54.327-.739.571a2.221 2.221 0 00-.04 2.705c.295.378.709.645 1.175.756.491.12 1.006.102 1.487-.052l.082-.023M5.336 18.171V17.06l-.022.01c-.25.121-.522.19-.801.203a1.183 1.183 0 01-.806-.237 1.03 1.03 0 01-.351-.498 1.202 1.202 0 01-.024-.667c.052-.225.177-.426.357-.569.16-.134.355-.218.562-.242a1.85 1.85 0 011.061.198l.024.013v-1.117l-.051-.014a2.862 2.862 0 00-1.011-.132 2.344 2.344 0 00-.903.206 2.08 2.08 0 00-.74.571 2.224 2.224 0 00-.041 2.705 2.11 2.11 0 001.176.756c.491.12 1.005.102 1.487-.052l.083-.023M9.26 17.249l-.004.957.07.012c.22.041.441.069.664.085.195.019.391.022.587.012.187-.014.372-.049.551-.104.21-.06.405-.163.571-.305a1.16 1.16 0 00.333-.478 1.31 1.31 0 00-.007-.96 1.068 1.068 0 00-.298-.414 1.261 1.261 0 00-.438-.255l-.722-.268a.388.388 0 01-.197-.188.245.245 0 01.008-.219.382.382 0 01.154-.142.798.798 0 01.257-.074c.153-.022.308-.021.46.005.18.02.358.051.533.096l.038.008v-.883l-.069-.015a4.749 4.749 0 00-.543-.097 2.844 2.844 0 00-.714-.003c-.3.027-.585.143-.821.33-.16.126-.281.293-.351.484-.104.29-.105.608 0 .899.054.145.14.274.252.381.097.093.207.173.327.236.157.084.324.149.497.195.057.017.114.035.17.054l.085.031.024.01c.084.03.162.078.226.14.045.042.08.094.101.151a.325.325 0 01.001.161.339.339 0 01-.166.198.856.856 0 01-.275.086 2.032 2.032 0 01-.427.021 5.208 5.208 0 01-.557-.074 9.195 9.195 0 01-.287-.067l-.033-.006zm-2.475.995h1.05v-4.167h-1.05v4.167zm12.162-2.936a1.095 1.095 0 011.541.158 1.094 1.094 0 01-.157 1.541l-.017.014a1.096 1.096 0 01-1.367-1.713m-1.525.854a2.193 2.193 0 002.666 2.107 2.139 2.139 0 00.701-3.937 2.207 2.207 0 00-3.367 1.83M22.961 10.728a.52.52 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155M20.117 10.728a.522.522 0 001.041 0V8.139a.521.521 0 00-1.04 0v2.589M17.231 11.771a.521.521 0 001.039 0V6.17a.52.52 0 00-1.039 0v5.601M14.393 10.728a.521.521 0 001.04 0V8.139a.52.52 0 00-1.039 0v2.589M11.494 10.728a.522.522 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155M8.624 10.728a.52.52 0 001.039 0V8.139a.52.52 0 00-1.039 0v2.589M5.737 11.771a.52.52 0 001.039 0V6.17a.52.52 0 00-1.039 0v5.601M2.876 10.728a.522.522 0 001.04 0V8.139a.52.52 0 00-1.039 0v2.589M0 10.728a.521.521 0 001.039 0V9.573a.52.52 0 00-1.039 0v1.155\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Cisco<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"jh-logo-slot\">\r\n                    <div class=\"jh-logo-track jh-track-2\">\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Amazon\">\r\n                                <path d=\"M18.8 15.3c-2.3 1.5-5.3 2.4-8.3 2.4-4.1 0-7.9-1.6-11-4.2-.3-.2 0-.6.4-.4 3.6 1.6 7.8 2.6 12.1 2.6 3 0 6.1-.5 8.9-1.6.5-.2.8.3.3.7-.1.1-.3.2-.4.3l.1.2zm1.1-1.3c-.2-.3.1-.6.4-.4 1.2.8 2.1 1.3 3 2.2.3.3.1.7-.3.5-1.3-.5-3-2.3-3-2.3z\" transform=\"translate(0, -3)\"\/>\r\n                            <\/svg>\r\n                            <span class=\"jh-brand-name\">Amazon<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Netflix\"><path d=\"M5.5 2v20h3.5v-13l6 13h3.5v-20h-3.5v13l-6-13z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Netflix<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Tesla\"><path d=\"M19.75 6.2c-5.2-1.3-10.4-1.3-15.6 0-1.1 0-1.1 1.7 0 1.7 4.1-1 8.2-1 12.3 0 1.1 0 1.1-1.7 0-1.7zM11 8.9v10.3c0 1.2 2 1.2 2 0V8.9c0-1.2-2-1.2-2 0z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Tesla<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Mastercard\"><path d=\"M11.343 18.031c.058.049.12.098.181.146-1.177.783-2.59 1.238-4.107 1.238C3.32 19.416 0 16.096 0 12c0-4.095 3.32-7.416 7.416-7.416 1.518 0 2.931.456 4.105 1.238-.06.051-.12.098-.165.15C9.6 7.489 8.595 9.688 8.595 12c0 2.311 1.001 4.51 2.748 6.031zm5.241-13.447c-1.52 0-2.931.456-4.105 1.238.06.051.12.098.165.15C14.4 7.489 15.405 9.688 15.405 12c0 2.31-1.001 4.507-2.748 6.031-.058.049-.12.098-.181.146 1.177.783 2.588 1.238 4.107 1.238C20.68 19.416 24 16.096 24 12c0-4.094-3.32-7.416-7.416-7.416zM12 6.174c-.096.075-.189.15-.28.231C10.156 7.764 9.169 9.765 9.169 12c0 2.236.987 4.236 2.551 5.595.09.08.185.158.28.232.096-.074.189-.152.28-.232 1.563-1.359 2.551-3.359 2.551-5.595 0-2.235-.987-4.236-2.551-5.595-.09-.08-.184-.156-.28-.231z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Mastercard<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Intel\"><path d=\"M20.42 7.345v9.18h1.651v-9.18zM0 7.475v1.737h1.737V7.474zm9.78.352v6.053c0 .513.044.945.13 1.292.087.34.235.618.44.828.203.21.475.359.803.451.334.093.754.136 1.255.136h.216v-1.533c-.24 0-.445-.012-.593-.037a.672.672 0 0 1-.39-.173.693.693 0 0 1-.173-.377 4.002 4.002 0 0 1-.037-.606v-2.182h1.193v-1.416h-1.193V7.827zm-3.505 2.312c-.396 0-.76.08-1.082.241-.327.161-.6.384-.822.668l-.087.117v-.902H2.658v6.256h1.639v-3.214c.018-.588.16-1.02.433-1.299.29-.297.642-.445 1.044-.445.476 0 .841.149 1.082.433.235.284.359.686.359 1.2v3.324h1.663V12.97c.006-.89-.229-1.595-.686-2.09-.458-.495-1.1-.742-1.917-.742zm10.065.006a3.252 3.252 0 0 0-2.306.946c-.29.29-.525.637-.692 1.033a3.145 3.145 0 0 0-.254 1.273c0 .452.08.878.241 1.274.161.395.39.742.674 1.032.284.29.637.526 1.045.693.408.173.86.26 1.342.26 1.397 0 2.262-.637 2.782-1.23l-1.187-.904c-.248.297-.841.699-1.583.699-.464 0-.847-.105-1.138-.321a1.588 1.588 0 0 1-.593-.872l-.019-.056h4.915v-.587c0-.451-.08-.872-.235-1.267a3.393 3.393 0 0 0-.661-1.033 3.013 3.013 0 0 0-1.02-.692 3.345 3.345 0 0 0-1.311-.248zm-16.297.118v6.256h1.651v-6.256zm16.278 1.286c1.132 0 1.664.797 1.664 1.255l-3.32.006c0-.458.525-1.255 1.656-1.261z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Intel<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Spotify\"><path d=\"M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Spotify<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"jh-logo-slot\">\r\n                    <div class=\"jh-logo-track jh-track-3\">\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Meta\"><path d=\"M16.142 5.3c-2.42 0-3.955 1.213-4.595 2.175C10.907 6.513 9.373 5.3 6.953 5.3 3.11 5.3 0 8.303 0 12c0 3.697 3.11 6.7 6.953 6.7 2.42 0 3.954-1.213 4.594-2.175.64 0.962 2.175 2.175 4.595 2.175 3.843 0 6.953-3.003 6.953-6.7 0-3.697-3.11-6.7-6.953-6.7zm-9.189 11.442c-2.64 0-4.787-2.128-4.787-4.742 0-2.614 2.147-4.742 4.787-4.742 1.662 0 3.06 1.157 3.812 2.766-0.752 1.609-2.15 2.766-3.812 2.766s-3.06-1.157-3.812-2.766c0.752-1.609 2.15-2.766 3.812-2.766 1.662 0 3.06 1.157 3.812 2.766-0.752 1.609-2.15 2.766-3.812 2.766z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Meta<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Stripe\"><path d=\"M20 10.3c0-4.3-2.1-6.1-5.7-6.1-3.9 0-6.5 2-6.5 5.4 0 5.3 7.3 4.4 7.3 7 0 1-.9 1.4-2.1 1.4-1.8 0-4-.8-5.3-1.6l-1.3 3.3c1.7 1 4.5 1.8 7 1.8 4.2 0 6.6-2 6.6-5.4 0-5.4-7.3-4.5-7.3-7.2 0-.8.7-1.3 1.9-1.3 1.5 0 3.3.6 4.4 1.2z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Stripe<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Airbnb\"><path d=\"M11.9 1c-2 0-3.6 1.4-4.2 3.3C6.4 8 3.5 15.2 2 19c-.3.8-.2 1.7.4 2.3.6.6 1.4.9 2.3.6 3.8-1.5 11-4.4 14.7-5.7 1.9-.6 3.3-2.2 3.3-4.2 0-2.4-1.9-4.3-4.3-4.3-1.1 0-2.2.4-3 1.2-.8-.8-1.9-1.2-3-1.2zM12 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Airbnb<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"jh-logo-slot\">\r\n                    <div class=\"jh-logo-track jh-track-4\">\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"PayPal\"><path d=\"M15.607 4.653H8.941L6.645 19.251H1.82L4.862 0h7.995c3.754 0 6.375 2.294 6.473 5.513-.648-.478-2.105-.86-3.722-.86m6.57 5.546c0 3.41-3.01 6.853-6.958 6.853h-2.493L11.595 24H6.74l1.845-11.538h3.592c4.208 0 7.346-3.634 7.153-6.949a5.24 5.24 0 0 1 2.848 4.686M9.653 5.546h6.408c.907 0 1.942.222 2.363.541-.195 2.741-2.655 5.483-6.441 5.483H8.714Z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">PayPal<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Samsung\"><path d=\"M19.8166 10.2808l.0459 2.6934h-.023l-.7793-2.6934h-1.2837v3.3925h.8481l-.0458-2.785h.023l.8366 2.785h1.2264v-3.3925zm-16.149 0l-.6418 3.427h.9284l.4699-3.1175h.0229l.4585 3.1174h.9169l-.6304-3.4269zm5.1805 0l-.424 2.6132h-.023l-.424-2.6132H6.5788l-.0688 3.427h.8596l.023-3.0832h.0114l.573 3.0831h.8711l.5731-3.083h.023l.0228 3.083h.8596l-.0802-3.4269zm-7.2664 2.4527c.0343.0802.0229.1949.0114.2522-.0229.1146-.1031.2292-.3324.2292-.2177 0-.3438-.126-.3438-.3095v-.3323H0v.2636c0 .7679.6074.9971 1.2493.9971.6189 0 1.1346-.2178 1.2149-.7794.0458-.298.0114-.4928 0-.5616-.1605-.722-1.467-.9283-1.5588-1.3295-.0114-.0688-.0114-.1375 0-.1834.023-.1146.1032-.2292.3095-.2292.2063 0 .321.126.321.3095v.2063h.8595v-.2407c0-.745-.6762-.8596-1.1576-.8596-.6074 0-1.1117.2063-1.2034.7564-.023.149-.0344.2866.0114.4585.1376.7106 1.364.9169 1.5358 1.3524m11.152 0c.0343.0803.0228.1834.0114.2522-.023.1146-.1032.2292-.3324.2292-.2178 0-.3438-.126-.3438-.3095v-.3323h-.917v.2636c0 .7564.596.9857 1.2379.9857.6189 0 1.1232-.2063 1.2034-.7794.0459-.298.0115-.4814 0-.5616-.1375-.7106-1.4327-.9284-1.5243-1.318-.0115-.0688-.0115-.1376 0-.1835.0229-.1146.1031-.2292.3094-.2292.1948 0 .321.126.321.3095v.2063h.848v-.2407c0-.745-.6647-.8596-1.146-.8596-.6075 0-1.1004.1948-1.192.7564-.023.149-.023.2866.0114.4585.1376.7106 1.341.9054 1.513 1.3524m2.8882.4585c.2407 0 .3094-.1605.3323-.2522.0115-.0343.0115-.0917.0115-.126v-2.533h.871v2.4642c0 .0688 0 .1948-.0114.2292-.0573.6419-.5616.8482-1.192.8482-.6303 0-1.1346-.2063-1.192-.8482 0-.0344-.0114-.1604-.0114-.2292v-2.4642h.871v2.533c0 .0458 0 .0916.0115.126 0 .0917.0688.2522.3095.2522m7.1518-.0344c.2522 0 .3324-.1605.3553-.2522.0115-.0343.0115-.0917.0115-.126v-.4929h-.3553v-.5043H24v.917c0 .0687 0 .1145-.0115.2292-.0573.6303-.596.8481-1.2034.8481-.6075 0-1.1461-.2178-1.2034-.8481-.0115-.1147-.0115-.1605-.0115-.2293v-1.444c0-.0574.0115-.172.0115-.2293.0802-.6419.596-.8482 1.2034-.8482s1.1347.2063 1.2034.8482c.0115.1031.0115.2292.0115.2292v.1146h-.8596v-.1948s0-.0803-.0115-.1261c-.0114-.0802-.0802-.2521-.3438-.2521-.2521 0-.321.1604-.3438.2521-.0115.0458-.0115.1032-.0115.1605v1.5702c0 .0458 0 .0916.0115.126 0 .0917.0917.2522.3323.2522\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Samsung<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-brand-item\">\r\n                            <svg class=\"jh-brand-logo\" viewBox=\"0 0 24 24\" role=\"img\" aria-label=\"Uber\"><path d=\"M0 7.97v4.958c0 1.867 1.302 3.101 3 3.101.826 0 1.562-.316 2.094-.87v.736H6.27V7.97H5.082v4.888c0 1.257-.85 2.106-1.947 2.106-1.11 0-1.946-.827-1.946-2.106V7.971H0zm7.44 0v7.925h1.13v-.725c.521.532 1.257.86 2.06.86a3.006 3.006 0 0 0 3.034-3.01 3.01 3.01 0 0 0-3.033-3.024 2.86 2.86 0 0 0-2.049.861V7.971H7.439zm9.869 2.038c-1.687 0-2.965 1.37-2.965 3 0 1.72 1.334 3.01 3.066 3.01 1.053 0 1.913-.463 2.49-1.233l-.826-.611c-.43.577-.996.847-1.664.847-.973 0-1.753-.7-1.912-1.64h4.697v-.373c0-1.72-1.222-3-2.886-3zm6.295.068c-.634 0-1.098.294-1.381.758v-.713h-1.131v5.774h1.142V12.61c0-.894.544-1.47 1.291-1.47H24v-1.065h-.396zm-6.319.928c.85 0 1.564.588 1.756 1.47H15.52c.203-.882.916-1.47 1.765-1.47zm-6.732.012c1.086 0 1.98.883 1.98 2.004a1.993 1.993 0 0 1-1.98 2.001A1.989 1.989 0 0 1 8.56 13.02a1.99 1.99 0 0 1 1.992-2.004z\"\/><\/svg>\r\n                            <span class=\"jh-brand-name\">Uber<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div> \r\n        <\/div>\r\n        <div class=\"jh-proof-ats\" style=\"font-family:'Geist Mono','JetBrains Mono',monospace;font-size:11px;font-weight:600;letter-spacing:0.08em;color:rgba(255,255,255,0.4);text-align:center;margin-top:14px\">Tested against <span style=\"color:#60B0FF\">ATS parsers<\/span> &middot; used by Fortune 500 hiring teams<\/div>\r\n    <\/div>\r\n<\/div> \r\n\r\n<style>\r\n@media (min-width: 1025px) {\r\n    #jh_proof_MROOa7, #jh_proof_MROOa7 * { box-sizing: border-box; }\r\n    #jh_proof_MROOa7.jh-social-proof-wrapper {\r\n        --jh-bg-color: #0A0A0A;\r\n        --jh-accent-color: #60B0FF;\r\n        --jh-glass-border: rgba(255, 255, 255, 0.08);\r\n        --jh-glass-bg: rgba(255, 255, 255, 0.02);\r\n        --jh-text-prose: 'Inter Tight', sans-serif;\r\n        --jh-text-tech: 'Geist Mono', monospace;\r\n        width: 100vw;\r\n        position: relative;\r\n        left: 50%;\r\n        right: 50%;\r\n        margin-left: -50vw;\r\n        margin-right: -50vw;\r\n        background: var(--jh-bg-color);\r\n        padding: 15px 0;\r\n        color: white;\r\n        font-family: var(--jh-text-prose);\r\n    }\r\n    .jh-social-proof-bar { width: 100%; padding: 20px 0; background: var(--jh-glass-bg); border-top: 1px solid var(--jh-glass-border); border-bottom: 1px solid var(--jh-glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: relative; overflow: hidden; }\r\n    .jh-version-tag { position: absolute; bottom: 12px; right: 20px; font-family: var(--jh-text-tech); font-size: 9px; color: rgba(255, 255, 255, 0.1); letter-spacing: 0.15em; pointer-events: none; }\r\n    .jh-social-proof-bar::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 400px; height: 1px; background: linear-gradient(90deg, transparent, var(--jh-accent-color), transparent); opacity: 0.25; }\r\n    .jh-proof-container { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 80px; padding: 0 40px; }\r\n    .jh-proof-text { font-family: var(--jh-text-prose); font-size: 15px; color: rgba(255, 255, 255, 0.45); white-space: nowrap; display: flex; align-items: center; gap: 20px; }\r\n    .jh-status-indicator { display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: rgba(96, 176, 255, 0.04); border: 1px solid rgba(96, 176, 255, 0.15); border-radius: 6px; }\r\n    .jh-pulse-dot { width: 6px; height: 6px; background: var(--jh-accent-color); border-radius: 50%; box-shadow: 0 0 10px var(--jh-accent-color); animation: jh-pulse 2.5s infinite; }\r\n    @keyframes jh-pulse { 0% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0.3; transform: scale(0.85); } }\r\n    .jh-proof-text span.jh-tech-data { font-family: var(--jh-text-tech); color: var(--jh-accent-color) !important; font-weight: 600; letter-spacing: 0.08em; font-size: 18px; }\r\n    .jh-proof-logos { display: flex; align-items: center; gap: clamp(32px, 4.5vw, 80px); }\r\n    .jh-logo-slot { height: 40px; width: 190px; overflow: hidden; position: relative; mask-image: linear-gradient(to bottom, transparent, black 1%, black 99%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 1%, black 99%, transparent); display: flex; justify-content: center; min-height: 40px; }\r\n    .jh-logo-track { display: flex; flex-direction: column; gap: 0; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); width: 100%; }\r\n    \/* Fix: Vertical Compression Refactor. Ensures icons center in the 40px slot. *\/\r\n    .jh-brand-item { height: 40px; display: flex; align-items: center; justify-content: center; gap: 8px; color: rgba(255, 255, 255, 0.55); transition: color 0.4s ease; white-space: nowrap; width: 100%; box-sizing: border-box; line-height: 1; margin: 0; flex-shrink: 0; }\r\n    .jh-brand-item:hover { color: var(--jh-accent-color); }\r\n    .jh-brand-logo { height: 18px; width: auto; fill: currentColor; flex-shrink: 0; }\r\n    .jh-brand-name { font-family: var(--jh-text-tech); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }\r\n}\r\n\r\n@media (min-width: 768px) and (max-width: 1024px) {\r\n    #jh_proof_MROOa7, #jh_proof_MROOa7 * { box-sizing: border-box; }\r\n    #jh_proof_MROOa7.jh-social-proof-wrapper {\r\n        --jh-bg-color: #050505;\r\n        --jh-accent-color: #60B0FF;\r\n        --jh-glass-border: rgba(255, 255, 255, 0.08);\r\n        --jh-glass-bg: rgba(255, 255, 255, 0.02);\r\n        --jh-text-prose: 'Inter Tight', sans-serif;\r\n        --jh-text-tech: 'Geist Mono', monospace;\r\n        width: 100vw;\r\n        position: relative;\r\n        left: 50%;\r\n        right: 50%;\r\n        margin-left: -50vw;\r\n        margin-right: -50vw;\r\n        background: var(--jh-bg-color);\r\n        padding: 10px 0;\r\n        color: white;\r\n        font-family: var(--jh-text-prose);\r\n        height: auto;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        overflow: hidden;\r\n    }\r\n    .jh-social-proof-bar { width: 100%; padding: 25px 20px; background: var(--jh-glass-bg); border-top: 1px solid var(--jh-glass-border); border-bottom: 1px solid var(--jh-glass-border); position: relative; overflow: hidden; backdrop-filter: blur(20px); }\r\n    .jh-proof-container { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0; text-align: center; }\r\n    .jh-proof-text { font-size: clamp(24px, 6vw, 32px); font-weight:800; line-height: 1.4; letter-spacing: -0.01em; white-space: normal; display: flex; flex-direction: column; align-items: center; gap: 20px; opacity: 1; color: white; text-transform: uppercase; letter-spacing: -0.04em; }\r\n    .jh-status-indicator { display: none; }\r\n    .jh-pulse-dot { width: 6px; height: 6px; background: var(--jh-accent-color); border-radius: 50%; box-shadow: 0 0 8px var(--jh-accent-color); animation: jh-pulse 2.5s infinite; }\r\n\r\n    .jh-proof-logos { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 20px; width: 100%; }\r\n    .jh-logo-slot { height: 32px; width: 100%; max-width: 110px; overflow: hidden; position: relative; display: flex; justify-content: center; min-height: 32px; }\r\n    .jh-logo-track { display: flex; flex-direction: column; align-items: center; width: 100%; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }\r\n    .jh-brand-item { height: 32px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; color: rgba(255, 255, 255, 0.55); width: 100%; box-sizing: border-box; flex-shrink: 0; }\r\n    .jh-brand-logo { height: 14px; width: auto; fill: currentColor; flex-shrink: 0; }\r\n    .jh-brand-name { font-family: var(--jh-text-tech); font-size: 9px; text-transform: uppercase; letter-spacing: 1px; }\r\n\r\n    .jh-version-tag { display: block; position: absolute; bottom: 8px; right: 10px; font-family: var(--jh-text-tech); font-size: 7px; color: rgba(255, 255, 255, 0.1); letter-spacing: 0.1em; pointer-events: none; }\r\n    @keyframes jh-pulse { 0% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.3; transform: scale(0.9); } }\r\n}\r\n\r\n@media (max-width: 767px) {\r\n    #jh_proof_MROOa7, #jh_proof_MROOa7 * { box-sizing: border-box; }\r\n    #jh_proof_MROOa7.jh-social-proof-wrapper {\r\n        --jh-bg-color: #050505;\r\n        --jh-accent-color: #60B0FF;\r\n        --jh-glass-border: rgba(255, 255, 255, 0.08);\r\n        --jh-glass-bg: rgba(255, 255, 255, 0.02);\r\n        --jh-text-prose: 'Inter Tight', sans-serif;\r\n        --jh-text-tech: 'Geist Mono', monospace;\r\n        width: 100vw;\r\n        position: relative;\r\n        left: 50%;\r\n        right: 50%;\r\n        margin-left: -50vw;\r\n        margin-right: -50vw;\r\n        background: var(--jh-bg-color);\r\n        padding: 10px 0;\r\n        color: white;\r\n        font-family: var(--jh-text-prose);\r\n        height: auto;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        overflow: hidden;\r\n    }\r\n    .jh-social-proof-bar {\r\n        width: 100%;\r\n        padding: 25px 20px;\r\n        background: var(--jh-glass-bg);\r\n        border-top: 1px solid var(--jh-glass-border);\r\n        border-bottom: 1px solid var(--jh-glass-border);\r\n        position: relative;\r\n        overflow: hidden;\r\n        backdrop-filter: blur(20px);\r\n    }\r\n    .jh-proof-container { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 0; text-align: center; }\r\n    .jh-proof-text {\r\n        font-size: clamp(20px, 4vw, 28px);\r\n        font-weight: 800;\r\n        line-height: 1.4;\r\n        letter-spacing: -0.01em;\r\n        white-space: normal;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        gap: 20px;\r\n        opacity: 1;\r\n        color: white;\r\n        text-transform: uppercase;\r\n        letter-spacing: -0.04em;\r\n    }\r\n    .jh-status-indicator {\r\n        display: none;\r\n    }\r\n    .jh-proof-text span.jh-tech-data { font-family: var(--jh-text-tech); color: var(--jh-accent-color) !important; font-weight: 700; font-size: 0.5em; letter-spacing: 0.1em; }\r\n\r\n    .jh-proof-logos { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 20px; width: 100%; }\r\n    .jh-logo-slot { height: 32px; width: 100%; max-width: 110px; overflow: hidden; position: relative; display: flex; justify-content: center; min-height: 32px; }\r\n    .jh-logo-track { display: flex; flex-direction: column; align-items: center; width: 100%; transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1); }\r\n    .jh-brand-item { height: 32px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; color: rgba(255, 255, 255, 0.55); width: 100%; box-sizing: border-box; flex-shrink: 0; }\r\n    .jh-brand-logo { height: 14px; width: auto; fill: currentColor; flex-shrink: 0; }\r\n    .jh-brand-name { font-family: var(--jh-text-tech); font-size: 8px; text-transform: uppercase; letter-spacing: 1px; }\r\n\r\n    .jh-version-tag { display: block; position: absolute; bottom: 8px; right: 10px; font-family: var(--jh-text-tech); font-size: 7px; color: rgba(255, 255, 255, 0.1); letter-spacing: 0.1em; pointer-events: none; }\r\n}\r\n\r\n\/* Specific override for iPad Air and similar high-res tablets *\/\r\n#jh_proof_MROOa7 .jh-proof-text span.jh-tech-data {\r\n    color: #60B0FF !important;\r\n    -webkit-text-fill-color: #60B0FF !important; \/* Forces color on Safari\/iOS *\/\r\n    opacity: 1 !important;\r\n    font-size: inherit !important;\r\n}\r\n<\/style><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-af26b8b elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"af26b8b\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-82f16d3 exad-sticky-section-no\" data-id=\"82f16d3\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-20c77ef exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"20c77ef\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section class=\"jh-h3s\" data-jh-section=\"how-3step\" role=\"region\" aria-label=\"How Just Hired works\">\n    <div class=\"jh-h3s-inner\">\n\n        <header class=\"jh-h3s-header\">\n            <span class=\"jh-h3s-eyebrow jh-mono\">&#9654; The Process<\/span>\n            <h2 class=\"jh-h3s-headline\">\n                From job post to submitted application <span class=\"jh-h3s-accent\">&mdash; in three steps.<\/span>\n            <\/h2>\n        <\/header>\n\n        <ol class=\"jh-h3s-grid\">\n\n            <li class=\"jh-h3s-step\">\n                <div class=\"jh-h3s-num jh-mono\">01<\/div>\n                <h3 class=\"jh-h3s-step-title\">Discover &amp; evaluate<\/h3>\n                <p class=\"jh-h3s-step-sub\">Find the roles worth your time &mdash; and see your real odds before you open them.<\/p>\n                <span class=\"jh-h3s-tag jh-h3s-tag--web jh-mono\">Web app<\/span>\n            <\/li>\n\n            <li class=\"jh-h3s-step\">\n                <div class=\"jh-h3s-num jh-mono\">02<\/div>\n                <h3 class=\"jh-h3s-step-title\">Decode &amp; tailor<\/h3>\n                <p class=\"jh-h3s-step-sub\">Read the real job behind the posting, surface your gaps, and tailor your resume to match.<\/p>\n                <span class=\"jh-h3s-tag jh-h3s-tag--web jh-mono\">Web app<\/span>\n            <\/li>\n\n            <li class=\"jh-h3s-step\">\n                <div class=\"jh-h3s-num jh-mono\">03<\/div>\n                <h3 class=\"jh-h3s-step-title\">Apply in 3 minutes<\/h3>\n                <p class=\"jh-h3s-step-sub\">Autofill the application from your profile and submit in one click. Then do it again.<\/p>\n                <span class=\"jh-h3s-tag jh-h3s-tag--ext jh-mono\">Extension<\/span>\n            <\/li>\n\n        <\/ol>\n\n        <div class=\"jh-h3s-cta-row\">\n            <a class=\"btn-g\" href=\"#three-lenses\">\n                See the full walkthrough\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n            <\/a>\n        <\/div>\n\n    <\/div>\n<\/section>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d71f662 elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"d71f662\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fe6c80b exad-sticky-section-no\" data-id=\"fe6c80b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-04065e0 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"04065e0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div id=\"jh_vui_AJxDON\" class=\"jh-vui-wrapper\" role=\"region\" aria-label=\"Feature Convergence Video\" data-jh-component=\"VideoUI\">\n    <header class=\"jh-vui-section-header\">\n        <span class=\"jh-vui-eyebrow\">&#9654; JUST HIRED IN ACTION<\/span>\n        <h2 class=\"jh-vui-headline\">Your whole job hunt, one screen.<\/h2>\n        <p class=\"jh-vui-sub\">Scroll to watch the pieces converge \u2014 job intel, a tailored resume, and one-click apply in a single workspace.<\/p>\n    <\/header>\n    <div class=\"jh-vui-scroll-container\">\n        <div class=\"jh-vui-sticky-wrapper\">\n            <!-- UI Background Layer -->\n            <div class=\"jh-vui-ui-background-layer\">\n                <img decoding=\"async\" src=\"https:\/\/www.justhired.ai\/wp-content\/uploads\/2026\/04\/UI-fadein-background.webp\" alt=\"UI Background\" loading=\"lazy\">\n            <\/div>\n\n            <!-- Resume Animation (replaces video) -->\n            <div class=\"jh-vui-video-player-layer jh-vui-pre-anim\">\n                <div class=\"jh-vui-anim-outer\">\n                    <div id=\"jh_stage_jh_vui_AJxDON\" class=\"jh-vui-stage\"><\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Glass Reflection Overlay -->\n            <div class=\"jh-vui-glass-reflection\"><\/div>\n\n            <!-- P2-1b: scroll-fading \"what you're watching\" title.\n                 Sibling of the layers (which are position:absolute, so this\n                 cannot disturb them or GSAP). All styling + the scroll-coupled\n                 fade live in style.css (body.home, desktop, @supports). -->\n            <div class=\"jh-vui-title-overlay\" aria-hidden=\"true\">One-Click Resume Tailoring<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n#jh_vui_AJxDON {\n    --bg: #000000;\n    --accent: #0554F2;\n    --accent-glow: rgba(5, 84, 242, 0.5);\n    --glass: rgba(255, 255, 255, 0.03);\n    --glass-border: rgba(255, 255, 255, 0.1);\n    background: transparent;\n    color: #fff;\n    overflow: hidden;\n    \/* Force full viewport width \u2014 overrides any Elementor column\/section\n       constraint without touching transforms or positioning *\/\n    width: 100% !important;\n    max-width: 100% !important;\n    padding-left: 0 !important;\n    padding-right: 0 !important;\n    box-sizing: border-box;\n}\n\n#jh_vui_AJxDON .jh-vui-scroll-container {\n    position: relative;\n    width: 100% !important;\n    max-width: 100% !important;\n}\n\n#jh_vui_AJxDON .jh-vui-sticky-wrapper {\n    position: relative;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    will-change: opacity;\n    opacity: 1;\n}\n\n#jh_vui_AJxDON .jh-vui-ui-background-layer,\n#jh_vui_AJxDON .jh-vui-video-player-layer,\n#jh_vui_AJxDON .jh-vui-glass-reflection {\n    aspect-ratio: 16 \/ 9;\n    will-change: transform, opacity, box-shadow;\n}\n\n#jh_vui_AJxDON .jh-vui-video-player-layer {\n    z-index: 2;\n    overflow: hidden;\n    background: #000;\n    border: 1px solid var(--glass-border);\n    padding: 20px;\n    box-sizing: border-box;\n}\n\n\/* Pre-animation state: scale down + greyscale + reduced opacity.\n   Using scale instead of max-width so GSAP's translate3d animation\n   can move the element freely without hitting a container boundary.\n   GSAP overwrites the transform when animation starts. *\/\n#jh_vui_AJxDON .jh-vui-video-player-layer.jh-vui-pre-anim {\n    transform: scale(0.82);\n    transform-origin: center center;\n    filter: grayscale(85%) brightness(0.6);\n    opacity: 0.55;\n    transition: filter 0.8s ease, opacity 0.8s ease;\n}\n#jh_vui_AJxDON .jh-vui-video-player-layer.jh-vui-pre-anim.jh-vui-revealing {\n    filter: grayscale(0%) brightness(1);\n    opacity: 1;\n    \/* transform handled by GSAP from this point \u2014 no CSS transition on it *\/\n}\n\n\/* Animation canvas \u2014 fills the video layer absolutely *\/\n#jh_vui_AJxDON .jh-vui-anim-outer {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: #030303;\n    background-image: repeating-linear-gradient(\n        0deg, transparent, transparent 3px,\n        rgba(5,84,242,0.004) 3px, rgba(5,84,242,0.004) 4px\n    );\n}\n\n#jh_vui_AJxDON .jh-vui-stage {\n    transform-origin: center center;\n    width: 900px;\n    height: 580px;\n    padding: 32px 28px 20px;\n    display: grid;\n    grid-template-columns: 220px 1fr;\n    grid-template-rows: 1fr auto;\n    gap: 0 14px;\n}\n\n#jh_vui_AJxDON .jh-vui-stage .col-left  { grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:10px; overflow:hidden; }\n#jh_vui_AJxDON .jh-vui-stage .col-right { grid-column:2; grid-row:1; display:flex; flex-direction:column; gap:10px; overflow:hidden; }\n#jh_vui_AJxDON .jh-vui-stage .resume-footer { grid-column:1\/3; grid-row:2; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   REDACTED STATE \u2014 shown on page load before scroll trigger\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n\/* Individual redaction bar \u2014 mimics a word or phrase *\/\n#jh_vui_AJxDON .jh-rb {\n    display: inline-block;\n    height: 0.75em;\n    background: rgba(5,84,242,0.22);   \/* muted \u2014 shadow not signal *\/\n    border-radius: 2px;\n    vertical-align: middle;\n    margin: 0 2px 3px;\n    transition: background 1.4s ease;\n}\n\/* Redacted section block \u2014 mimics a full line *\/\n#jh_vui_AJxDON .jh-rb-line {\n    display: block;\n    height: 0.65em;\n    background: rgba(5,84,242,0.16);   \/* near-invisible dark tint *\/\n    border-radius: 2px;\n    margin: 5px 0;\n    transition: background 1.4s ease;\n}\n\/* Larger name bar *\/\n#jh_vui_AJxDON .jh-rb-name {\n    display: block;\n    height: 1.1em;\n    width: 68%;\n    background: rgba(5,84,242,0.28);   \/* slightly more visible \u2014 largest element *\/\n    border-radius: 3px;\n    margin-bottom: 6px;\n    box-shadow: 0 0 8px rgba(5,84,242,0.12);\n    transition: background 1.4s ease, box-shadow 1.4s ease;\n}\n\/* Keyword-sized redaction bar \u2014 the ONLY element that hints at importance *\/\n#jh_vui_AJxDON .jh-rb-kw {\n    display: inline-block;\n    height: 0.75em;\n    background: rgba(5,84,242,0.42);   \/* noticeably more present than text bars *\/\n    border-radius: 3px;\n    margin: 1px 3px;\n    border: 1px solid rgba(5,84,242,0.35);\n    box-shadow: 0 0 6px rgba(5,84,242,0.2);\n    vertical-align: middle;\n    transition: background 1.4s ease, box-shadow 1.4s ease, border-color 1.4s ease;\n}\n\n\/* \u2500\u2500 IN-VIEW: bars bloom from near-invisible to clearly readable \u2500\u2500 *\/\n#jh_vui_AJxDON.jh-vui-in-view .jh-rb      { background: rgba(5,84,242,0.55); }\n#jh_vui_AJxDON.jh-vui-in-view .jh-rb-line  { background: rgba(5,84,242,0.42); }\n#jh_vui_AJxDON.jh-vui-in-view .jh-rb-name  { background: rgba(5,84,242,0.68); box-shadow: 0 0 14px rgba(5,84,242,0.22); }\n#jh_vui_AJxDON.jh-vui-in-view .jh-rb-kw    { background: rgba(5,84,242,0.80); box-shadow: 0 0 10px rgba(5,84,242,0.40); border-color: rgba(5,84,242,0.60); }\n#jh_vui_AJxDON.jh-vui-in-view .jh-redact-section { border-color: rgba(255,255,255,0.10); }\n\/* Status bar \u2014 more prominent once in view *\/\n#jh_vui_AJxDON.jh-vui-in-view .jh-vui-status-overlay {\n    background: rgba(5,84,242,0.14);\n    border-color: rgba(5,84,242,0.55);\n    color: rgba(96,176,255,1.0);\n    font-size: 10px;\n    transition: background 1.4s ease, border-color 1.4s ease, color 1.4s ease;\n}\n\n\/* Pre-built redacted resume-section panels start visible *\/\n#jh_vui_AJxDON .jh-redact-section {\n    position: relative;\n    background: rgba(10,10,10,0.95);    \/* slightly darker \u2014 panels recede *\/\n    border: 1px solid rgba(255,255,255,0.05); \/* near-invisible border \u2014 brand blue only on keywords *\/\n    border-radius: 8px;\n    padding: 11px 14px;\n    flex-shrink: 0;\n    overflow: hidden;\n}\n#jh_vui_AJxDON .jh-redact-section::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(135deg,rgba(5,84,242,0.02) 0%,transparent 55%);\n    pointer-events: none;\n}\n\n\/* Redact section header row *\/\n#jh_vui_AJxDON .jh-redact-hdr {\n    display: flex;\n    align-items: center;\n    gap: 7px;\n    border-bottom: 1px solid rgba(255,255,255,0.04); \/* near-invisible *\/\n    padding-bottom: 7px;\n    margin-bottom: 10px;\n}\n#jh_vui_AJxDON .jh-redact-hdr-icon {\n    width: 10px; height: 10px;\n    border-radius: 50%;\n    background: rgba(5,84,242,0.28);  \/* toned down \u2014 not competing *\/\n    flex-shrink: 0;\n}\n#jh_vui_AJxDON .jh-redact-hdr-bar {\n    height: 0.5em;\n    width: 60px;\n    background: rgba(96,176,255,0.14); \/* very dim label placeholder *\/\n    border-radius: 2px;\n}\n#jh_vui_AJxDON .jh-redact-hdr-bar2 {\n    margin-left: auto;\n    height: 0.5em;\n    width: 40px;\n    background: rgba(255,255,255,0.06); \/* barely there *\/\n    border-radius: 2px;\n}\n\n\/* Dissolve transition \u2014 all redact bars fade out when .dissolving added *\/\n#jh_vui_AJxDON .jh-vui-stage.dissolving .jh-rb,\n#jh_vui_AJxDON .jh-vui-stage.dissolving .jh-rb-line,\n#jh_vui_AJxDON .jh-vui-stage.dissolving .jh-rb-name,\n#jh_vui_AJxDON .jh-vui-stage.dissolving .jh-rb-kw,\n#jh_vui_AJxDON .jh-vui-stage.dissolving .jh-redact-section {\n    opacity: 0;\n    transition: opacity 0.45s ease;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   STATUS OVERLAY \u2014 \"CLEARANCE REQUIRED\" pulsing line\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#jh_vui_AJxDON .jh-vui-status-overlay {\n    position: absolute;\n    bottom: 18px;\n    left: 50%;\n    transform: translateX(-50%);\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: rgba(5,84,242,0.08);\n    border: 1px solid rgba(5,84,242,0.28);\n    border-radius: 20px;\n    padding: 5px 16px;\n    font-family: 'Geist Mono', 'JetBrains Mono','Courier New',monospace;\n    font-size: 9px;\n    letter-spacing: 0.22em;\n    color: rgba(96,176,255,0.8);\n    text-transform: uppercase;\n    white-space: nowrap;\n    z-index: 10;\n    pointer-events: none;\n    \/* Pulse the whole bar *\/\n    animation: jh_vui_status_pulse_jh_vui_AJxDON 2.2s ease-in-out infinite;\n}\n#jh_vui_AJxDON .jh-vui-status-dot {\n    width: 5px; height: 5px;\n    border-radius: 50%;\n    background: #60B0FF;\n    box-shadow: 0 0 6px #60B0FF;\n    flex-shrink: 0;\n    animation: jh_vui_dot_pulse_jh_vui_AJxDON 2.2s ease-in-out infinite;\n}\n#jh_vui_AJxDON .jh-vui-status-overlay.dissolving {\n    opacity: 0;\n    transition: opacity 0.5s ease;\n}\n@keyframes jh_vui_status_pulse_jh_vui_AJxDON {\n    0%,100% { opacity: 0.65; }\n    50%     { opacity: 1; }\n}\n@keyframes jh_vui_dot_pulse_jh_vui_AJxDON {\n    0%,100% { opacity: 0.7; transform: scale(1); }\n    50%     { opacity: 0.35; transform: scale(0.7); }\n}\n\n\/* --- DESKTOP (>= 1025px) --- *\/\n@media (min-width: 1025px) {\n    #jh_vui_AJxDON {\n        background: var(--bg);\n    }\n\n    #jh_vui_AJxDON .jh-vui-scroll-container {\n        height: 350vh; \/* trimmed from 500vh 2026-05-25: dead scroll measured lead 20% \/ active 50% \/ trail 30%; 350vh = ~1.25-screen reveal + ~1.25 dead, down from ~2 + ~2 *\/\n    }\n\n    #jh_vui_AJxDON .jh-vui-sticky-wrapper {\n        position: sticky;\n        top: 0;\n        height: 100vh;\n        opacity: 0; \/* Will be set to 1 by GSAP *\/\n    }\n\n    #jh_vui_AJxDON .jh-vui-ui-background-layer {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100vw;\n        height: calc(100vh + 50px);\n        z-index: 1;\n        opacity: 0; \/* Will animate in *\/\n        aspect-ratio: auto;\n    }\n\n    #jh_vui_AJxDON .jh-vui-ui-background-layer img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    #jh_vui_AJxDON .jh-vui-video-player-layer,\n    #jh_vui_AJxDON .jh-vui-glass-reflection {\n        position: absolute;\n        top: calc(50% + 50px);\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 92vw;\n    }\n\n    #jh_vui_AJxDON .jh-vui-video-player-layer {\n        border-radius: 20px;\n        box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 30px var(--accent-glow);\n        padding: 58px 20px 20px 20px;\n    }\n\n    #jh_vui_AJxDON .jh-vui-glass-reflection {\n        z-index: 3;\n        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05) 100%);\n        pointer-events: none;\n        opacity: 0; \/* Will animate in *\/\n        border-radius: 20px;\n    }\n}\n\n\/* --- MOBILE & TABLET (<= 1024px) --- *\/\n@media (max-width: 1024px) {\n    #jh_vui_AJxDON {\n        background: transparent !important;\n    }\n\n    #jh_vui_AJxDON .jh-vui-scroll-container {\n        height: auto;\n        padding: clamp(60px, 8vh, 80px) 0;\n    }\n\n    #jh_vui_AJxDON .jh-vui-sticky-wrapper {\n        height: auto;\n        flex-direction: column;\n        gap: 0;\n        max-width: 100%;   \/* full viewport width \u2014 no wasted margin *\/\n        margin: 0;\n        padding: 0;\n        opacity: 1;\n    }\n\n    #jh_vui_AJxDON .jh-vui-ui-background-layer {\n        display: none;\n    }\n\n    #jh_vui_AJxDON .jh-vui-video-player-layer {\n        position: relative;\n        top: auto; left: auto;\n        transform: none !important;\n        width: 100%;\n        aspect-ratio: unset;\n        min-height: 820px;\n        border-radius: 0;\n        box-shadow: none;\n        filter: none !important;\n        opacity: 1 !important;\n        padding: 0 !important;\n        overflow: hidden;           \/* clips stage if scale slightly > 1 *\/\n    }\n\n    #jh_vui_AJxDON .jh-vui-glass-reflection {\n        display: none;\n    }\n\n    \/* Resume animation fills full player layer on mobile *\/\n    #jh_vui_AJxDON .jh-vui-anim-outer {\n        position: relative;\n        inset: auto;\n        width: 100%;\n        min-height: 820px;     \/* matches MOB_CANVAS_H *\/\n        overflow: hidden;      \/* safe: scale=1.0\/transform:none so nothing clips *\/\n    }\n\n    \/* Single-column layout \u2014 full width so content never clips *\/\n    #jh_vui_AJxDON .jh-vui-stage {\n        width: 100%;           \/* fills player-layer, never overflows *\/\n        height: auto;\n        min-height: 820px;\n        grid-template-columns: 1fr;\n        grid-template-rows: auto;\n        padding: 20px 16px;\n        box-sizing: border-box;\n        overflow: hidden;      \/* belt-and-braces: clips any rogue child *\/\n    }\n\n    \/* Both columns stack in a single column *\/\n    #jh_vui_AJxDON .jh-vui-stage .col-left,\n    #jh_vui_AJxDON .jh-vui-stage .col-right,\n    #jh_vui_AJxDON .jh-vui-stage .col-main {\n        grid-column: 1 !important;\n        width: 100%;\n        display: flex;\n        flex-direction: column;\n        gap: 14px;          \/* space between resume sections *\/\n    }\n\n    \/* Footer spans full width *\/\n    #jh_vui_AJxDON .jh-vui-stage .resume-footer {\n        grid-column: 1 !important;\n    }\n\n    \/* Scroll container \u2014 no padding, stage is full bleed *\/\n    #jh_vui_AJxDON .jh-vui-scroll-container {\n        padding: 0;\n    }\n\n    \/* CLEARANCE REQUIRED overlay \u2014 not needed on mobile *\/\n    #jh_vui_AJxDON .jh-vui-status-overlay {\n        display: none !important;\n    }\n\n    \/* NEURAL_PARSE \/ KW_DENSITY footer \u2014 not needed on mobile *\/\n    #jh_vui_AJxDON .resume-footer {\n        display: none !important;\n    }\n\n    \/* \u2500\u2500 Change 2: font sizes \u2014 legible at ~1.0 mobile scale \u2500\u2500 *\/\n    #jh_vui_AJxDON .contact-name  { font-size: 18px; }\n    #jh_vui_AJxDON .contact-role  { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 0; }\n    \/* Mobile vertical-space save: hide contact details, keep only name + role *\/\n    #jh_vui_AJxDON .contact-list  { display: none !important; }\n    #jh_vui_AJxDON .section-title { font-size: 13px; letter-spacing: 0.18em; font-weight: 700; color: #8ec5ff; text-shadow: 0 0 8px rgba(96,176,255,0.45); }\n    #jh_vui_AJxDON .section-icon  { width: 16px; height: 16px; }\n    #jh_vui_AJxDON .section-tag   { font-size: 9px; }\n    #jh_vui_AJxDON .exp-company   { font-size: 14px; }\n    #jh_vui_AJxDON .exp-role      { font-size: 10px; }\n    #jh_vui_AJxDON .exp-date      { font-size: 11px; color: rgba(255,255,255,0.72); white-space: normal; }\n    \/* Flex left side must shrink on narrow screens *\/\n    #jh_vui_AJxDON .exp-meta-row > div:first-child { min-width: 0; overflow: hidden; }\n    #jh_vui_AJxDON .bullet-span   { font-size: 12px; line-height: 1.6; word-break: break-word; overflow-wrap: break-word; }\n    #jh_vui_AJxDON .kw-box        { white-space: normal; }\n    #jh_vui_AJxDON .edu-degree    { font-size: 13px; line-height: 1.4; }\n    #jh_vui_AJxDON .edu-school    { font-size: 10px; }\n    #jh_vui_AJxDON .edu-detail    { font-size: 11px; }\n    #jh_vui_AJxDON .edu-year      { font-size: 11px; color: rgba(255,255,255,0.72); }\n    #jh_vui_AJxDON .edu-gpa       { font-size: 10px; }\n    #jh_vui_AJxDON .inject-badge  { font-size: 9px; padding: 3px 9px; }\n    #jh_vui_AJxDON .summary-para  { font-size: 12px; line-height: 1.8; }\n\n    \/* \u2500\u2500 Change 5: section padding \u2014 breathing room in full-width card \u2500\u2500 *\/\n    #jh_vui_AJxDON .resume-section { padding: 16px 18px; border-radius: 10px; }\n    #jh_vui_AJxDON .section-header { margin-bottom: 12px; padding-bottom: 10px; }\n    #jh_vui_AJxDON .exp-entry     { padding-bottom: 14px; margin-bottom: 14px; }\n    #jh_vui_AJxDON .exp-bullets   { gap: 8px; }\n    #jh_vui_AJxDON .exp-bullets li { margin-bottom: 6px; }\n\n    \/* \u2500\u2500 Phase A motion polish \u2500\u2500 *\/\n    \/* Section entrance with blur \"materialize\" + brand-spec spring curve.\n       Brand guideline mobile card spring: 500ms cubic-bezier(0.34,1.2,0.64,1).\n       We use 380ms \u2014 close to spec, fast enough not to feel sluggish. *\/\n    #jh_vui_AJxDON .resume-section {\n        filter: blur(4px);\n        transition: opacity 0.38s cubic-bezier(0.34,1.2,0.64,1),\n                    transform 0.38s cubic-bezier(0.34,1.2,0.64,1),\n                    filter 0.38s cubic-bezier(0.34,1.2,0.64,1);\n    }\n    #jh_vui_AJxDON .resume-section.vis { filter: blur(0px); }\n\n    \/* Keyword box pop on mobile \u2014 desktop scramble is disabled <=768px,\n       so we lean on the box scale to provide the \"this keyword just landed\"\n       beat. 200ms with overshoot curve makes each kw feel snapped into place. *\/\n    #jh_vui_AJxDON .kw-box {\n        transition: opacity 0.2s cubic-bezier(0.34,1.6,0.64,1),\n                    transform 0.2s cubic-bezier(0.34,1.6,0.64,1);\n    }\n\n    \/* Mobile keyword letter cascade \u2014 each char starts as noise-blue,\n       transitions to locked-white when JS adds .lit (staggered 22ms apart).\n       Restores the \"AI generating each token\" feel without the rAF scramble. *\/\n    #jh_vui_AJxDON .kw-char {\n        display: inline-block;\n        color: rgba(96,176,255,0.45);\n        transition: color 0.18s cubic-bezier(0.16,1,0.3,1),\n                    text-shadow 0.18s cubic-bezier(0.16,1,0.3,1);\n    }\n    #jh_vui_AJxDON .kw-char.lit {\n        color: rgba(255,255,255,0.95);\n        text-shadow: 0 0 6px rgba(96,176,255,0.6);\n    }\n}\n\/* --- RESUME ANIMATION COMPONENT STYLES (scoped to instance) --- *\/\n#jh_vui_AJxDON .wf { display:inline-block; vertical-align:baseline; opacity:0; transform:translateY(-4px); transition:opacity 0.09s cubic-bezier(0.16,1,0.3,1),transform 0.09s cubic-bezier(0.16,1,0.3,1); }\n#jh_vui_AJxDON .wf.vis { opacity:1; transform:translateY(0); }\n#jh_vui_AJxDON .resume-section { position:relative; background:#0A0A0A; border:1px solid rgba(255,255,255,0.08); overflow:hidden; opacity:0; transform:translateY(8px); transition:opacity 0.16s cubic-bezier(0.23,1,0.32,1),transform 0.16s cubic-bezier(0.23,1,0.32,1); flex-shrink:0; }\n#jh_vui_AJxDON .resume-section.vis { opacity:1; transform:translateY(0); }\n#jh_vui_AJxDON .resume-section::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(5,84,242,0.02) 0%,transparent 55%); pointer-events:none; z-index:0; }\n#jh_vui_AJxDON .section-header { position:relative; z-index:1; display:flex; align-items:center; gap:7px; border-bottom:1px solid rgba(255,255,255,0.08); }\n#jh_vui_AJxDON .section-icon   { color:#0554F2; filter:drop-shadow(0 0 3px rgba(5,84,242,0.5)); flex-shrink:0; width:12px; height:12px; }\n#jh_vui_AJxDON .section-title  { font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:7.5px; letter-spacing:0.28em; color:#60B0FF; text-transform:uppercase; }\n#jh_vui_AJxDON .section-tag    { margin-left:auto; font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:7px; color:rgba(255,255,255,0.4); letter-spacing:0.06em; }\n#jh_vui_AJxDON .section-header { margin-bottom:9px; padding-bottom:7px; }\n#jh_vui_AJxDON .resume-section { padding:11px 14px; border-radius:8px; }\n#jh_vui_AJxDON .contact-name  { font-size:14px; font-weight:800; color:#fff; letter-spacing:-0.01em; margin-bottom:2px; position:relative; z-index:1; }\n#jh_vui_AJxDON .contact-role  { font-size:8px; font-weight:600; color:#60B0FF; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:10px; position:relative; z-index:1; }\n#jh_vui_AJxDON .contact-list  { list-style:none; position:relative; z-index:1; }\n#jh_vui_AJxDON .contact-list li { display:flex; align-items:center; gap:6px; font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:9px; color:rgba(255,255,255,0.6); letter-spacing:0.02em; margin-bottom:4px; }\n#jh_vui_AJxDON .contact-list li::before { content:'\u25b8'; color:#0554F2; font-size:7px; flex-shrink:0; }\n#jh_vui_AJxDON .fade-el { opacity:0; transition:opacity 0.1s ease; }\n#jh_vui_AJxDON .fade-el.vis { opacity:1; }\n#jh_vui_AJxDON .summary-para { position:relative; z-index:1; font-size:10.5px; line-height:2.2; color:rgba(255,255,255,0.6); }\n#jh_vui_AJxDON .exp-entry    { position:relative; z-index:1; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:9px; margin-bottom:9px; }\n#jh_vui_AJxDON .exp-entry:last-child { border-bottom:none; padding-bottom:0; margin-bottom:0; }\n#jh_vui_AJxDON .exp-meta-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:5px; }\n#jh_vui_AJxDON .exp-company  { font-size:10.5px; font-weight:700; color:rgba(255,255,255,0.92); letter-spacing:0.02em; }\n#jh_vui_AJxDON .exp-role     { font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:8px; font-weight:500; color:#60B0FF; letter-spacing:0.1em; text-transform:uppercase; margin-top:1px; }\n#jh_vui_AJxDON .exp-date     { font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:7.5px; color:rgba(255,255,255,0.4); letter-spacing:0.08em; white-space:nowrap; padding-top:1px; }\n#jh_vui_AJxDON .exp-bullets  { list-style:none; margin-top:4px; }\n#jh_vui_AJxDON .exp-bullets li { display:flex; align-items:flex-start; gap:6px; line-height:1.55; margin-bottom:4px; }\n#jh_vui_AJxDON .exp-bullets li::before { content:'\u25b8'; color:#0554F2; font-size:7px; flex-shrink:0; padding-top:3px; }\n#jh_vui_AJxDON .bullet-span  { font-size:10px; color:rgba(255,255,255,0.6); }\n#jh_vui_AJxDON .inject-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(5,84,242,0.07); border:1px solid rgba(5,84,242,0.2); border-radius:3px; font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:7px; color:rgba(96,176,255,0.7); letter-spacing:0.13em; text-transform:uppercase; opacity:0; transition:opacity 0.1s ease; margin-top:5px; padding:1px 7px; }\n#jh_vui_AJxDON .inject-badge.vis { opacity:1; }\n#jh_vui_AJxDON .inject-badge::before { content:''; width:3px; height:3px; border-radius:50%; background:#0554F2; box-shadow:0 0 4px rgba(5,84,242,0.5); animation:jh_pulse_jh_vui_AJxDON 1.5s infinite; }\n#jh_vui_AJxDON .edu-block  { position:relative; z-index:1; }\n#jh_vui_AJxDON .edu-degree { font-size:10px; font-weight:700; color:rgba(255,255,255,0.92); margin-bottom:2px; line-height:1.3; }\n#jh_vui_AJxDON .edu-school { font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:8px; color:#60B0FF; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:2px; }\n#jh_vui_AJxDON .edu-detail { font-size:9px; color:rgba(255,255,255,0.4); margin-bottom:4px; }\n#jh_vui_AJxDON .edu-row    { display:flex; align-items:center; justify-content:space-between; }\n#jh_vui_AJxDON .edu-year   { font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:8px; color:rgba(255,255,255,0.4); letter-spacing:0.1em; }\n#jh_vui_AJxDON .edu-gpa    { display:inline-block; background:rgba(5,84,242,0.07); border:1px solid rgba(5,84,242,0.2); border-radius:3px; padding:1px 7px; font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:7.5px; color:#60B0FF; letter-spacing:0.12em; }\n#jh_vui_AJxDON .resume-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,0.08); opacity:0; transition:opacity 0.3s cubic-bezier(0.16,1,0.3,1); flex-shrink:0; padding-top:6px; margin-top:6px; }\n#jh_vui_AJxDON .resume-footer.vis { opacity:1; }\n#jh_vui_AJxDON .footer-sig  { font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:7px; letter-spacing:0.18em; color:rgba(255,255,255,0.4); text-transform:uppercase; }\n#jh_vui_AJxDON .footer-sig span { color:#60B0FF; }\n#jh_vui_AJxDON .pips-wrap   { display:flex; align-items:center; gap:8px; }\n#jh_vui_AJxDON .pip-label,#jh_vui_AJxDON .pip-count { font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:7px; color:rgba(255,255,255,0.4); letter-spacing:0.18em; text-transform:uppercase; }\n#jh_vui_AJxDON .pip-count   { color:#60B0FF; }\n#jh_vui_AJxDON .kw-pips     { display:flex; gap:2px; }\n#jh_vui_AJxDON .pip         { width:8px; height:2px; border-radius:1px; background:rgba(255,255,255,0.05); transition:background 0.07s ease,box-shadow 0.07s ease; }\n#jh_vui_AJxDON .pip.lit     { background:#0554F2; box-shadow:0 0 5px rgba(5,84,242,0.5); }\n#jh_vui_AJxDON .kw-box { position:relative; display:inline-block; vertical-align:middle; background:rgba(5,84,242,0.08); border:1px solid rgba(5,84,242,0.38); border-radius:3px; margin:2px 1px; font-family:'Geist Mono','JetBrains Mono','Courier New',monospace; font-size:0.82em; font-weight:500; letter-spacing:0.04em; white-space:nowrap; box-shadow:0 0 5px rgba(5,84,242,0.18),inset 0 1px 0 rgba(255,255,255,0.04); opacity:0; transform:scale(0.88); transition:opacity 0.07s ease,transform 0.07s ease; }\n#jh_vui_AJxDON .kw-box.vis { opacity:1; transform:scale(1); }\n#jh_vui_AJxDON .kw-ghost-a,#jh_vui_AJxDON .kw-ghost-b { position:absolute; left:5px; top:1px; pointer-events:none; white-space:nowrap; font-family:inherit; font-size:1em; font-weight:inherit; letter-spacing:inherit; opacity:0; z-index:1; }\n#jh_vui_AJxDON .kw-ghost-a { color:#0554F2; }\n#jh_vui_AJxDON .kw-ghost-b { color:#60B0FF; }\n#jh_vui_AJxDON .kw-text    { position:relative; z-index:2; display:inline; white-space:nowrap; }\n#jh_vui_AJxDON .c-locked   { color:rgba(255,255,255,0.92); }\n#jh_vui_AJxDON .c-sep      { color:rgba(96,176,255,0.7); }\n#jh_vui_AJxDON .c-noise    { color:rgba(96,176,255,0.45); }\n#jh_vui_AJxDON .kw-scrambling .kw-ghost-a { animation:ga_scrm_jh_vui_AJxDON 0.075s infinite; }\n#jh_vui_AJxDON .kw-scrambling .kw-ghost-b { animation:gb_scrm_jh_vui_AJxDON 0.075s infinite; }\n#jh_vui_AJxDON .kw-locking    .kw-ghost-a { animation:ga_scrm_jh_vui_AJxDON 0.10s  infinite; }\n#jh_vui_AJxDON .kw-locking    .kw-ghost-b { animation:gb_scrm_jh_vui_AJxDON 0.10s  infinite; }\n#jh_vui_AJxDON .kw-locked     .kw-ghost-a { animation:ga_idle_jh_vui_AJxDON 5.5s   infinite; }\n#jh_vui_AJxDON .kw-locked     .kw-ghost-b { animation:gb_idle_jh_vui_AJxDON 5.5s   infinite; }\n@keyframes kw_snap_jh_vui_AJxDON {\n    0%  { box-shadow:0 0 22px rgba(96,176,255,0.7),0 0 40px rgba(5,84,242,0.5); border-color:#60B0FF; }\n    35% { box-shadow:0 0 10px rgba(5,84,242,0.3); border-color:rgba(96,176,255,0.5); }\n    100%{ box-shadow:0 0 5px rgba(5,84,242,0.18),inset 0 1px 0 rgba(255,255,255,0.04); border-color:rgba(5,84,242,0.38); }\n}\n#jh_vui_AJxDON .kw-snap { animation:kw_snap_jh_vui_AJxDON 0.45s cubic-bezier(0.16,1,0.3,1) forwards; }\n@keyframes ga_scrm_jh_vui_AJxDON {\n    0%  {opacity:.55;transform:translate(-2px,1px); clip-path:inset(15% 0 55% 0);}\n    20% {opacity:.35;transform:translate(2px,-1px); clip-path:inset(58% 0 12% 0);}\n    40% {opacity:.6; transform:translate(-1px,2px); clip-path:inset(28% 0 42% 0);}\n    60% {opacity:.4; transform:translate(3px,0);    clip-path:inset(72% 0 3%  0);}\n    80% {opacity:.5; transform:translate(-2px,-1px);clip-path:inset(6%  0 68% 0);}\n    100%{opacity:.55;transform:translate(1px,1px);  clip-path:inset(44% 0 26% 0);}\n}\n@keyframes gb_scrm_jh_vui_AJxDON {\n    0%  {opacity:.45;transform:translate(2px,-1px); clip-path:inset(62% 0 8%  0);}\n    20% {opacity:.6; transform:translate(-2px,2px); clip-path:inset(8%  0 62% 0);}\n    40% {opacity:.3; transform:translate(1px,-2px); clip-path:inset(38% 0 32% 0);}\n    60% {opacity:.55;transform:translate(-3px,0);   clip-path:inset(18% 0 52% 0);}\n    80% {opacity:.4; transform:translate(2px,1px);  clip-path:inset(78% 0 2%  0);}\n    100%{opacity:.45;transform:translate(-1px,-1px);clip-path:inset(33% 0 37% 0);}\n}\n@keyframes ga_idle_jh_vui_AJxDON {\n    0%,85%{opacity:0; transform:translate(0,0);      clip-path:inset(0 0 100% 0);}\n    86%   {opacity:.6; transform:translate(-2px,1px); clip-path:inset(18% 0 52% 0);}\n    87%   {opacity:.4; transform:translate(2px,-1px); clip-path:inset(58% 0 12% 0);}\n    88%   {opacity:.5; transform:translate(-1px,2px); clip-path:inset(32% 0 38% 0);}\n    89%   {opacity:.3; transform:translate(3px,0);    clip-path:inset(72% 0 4%  0);}\n    90%   {opacity:0;  transform:translate(0,0);      clip-path:inset(0 0 100% 0); }\n    100%  {opacity:0;}\n}\n@keyframes gb_idle_jh_vui_AJxDON {\n    0%,87%{opacity:0;  transform:translate(0,0);      clip-path:inset(0 0 100% 0);}\n    88%   {opacity:.5;  transform:translate(2px,-1px); clip-path:inset(8%  0 62% 0);}\n    89%   {opacity:.55; transform:translate(-2px,2px); clip-path:inset(62% 0 8%  0);}\n    90%   {opacity:.3;  transform:translate(1px,-2px); clip-path:inset(38% 0 32% 0);}\n    91%   {opacity:.45; transform:translate(-3px,0);   clip-path:inset(20% 0 50% 0);}\n    92%   {opacity:0;   transform:translate(0,0);      clip-path:inset(0 0 100% 0); }\n    100%  {opacity:0;}\n}\n@keyframes jh_pulse_jh_vui_AJxDON {\n    0%,100%{opacity:1;transform:scale(1);}\n    50%    {opacity:.4;transform:scale(.7);}\n}\n\n\/* Phase B: section-icon ignition \u2014 when a section becomes .vis, the icon\n   briefly blooms its drop-shadow before decaying back to baseline.\n   Reads like a HUD instrument coming online. Fires once per section. *\/\n@keyframes jh_icon_ignite_jh_vui_AJxDON {\n    0%   { filter: drop-shadow(0 0 3px rgba(5,84,242,0.5)); }\n    32%  { filter: drop-shadow(0 0 10px rgba(96,176,255,0.95))\n                   drop-shadow(0 0 18px rgba(5,84,242,0.55)); }\n    100% { filter: drop-shadow(0 0 3px rgba(5,84,242,0.5)); }\n}\n#jh_vui_AJxDON .resume-section.vis .section-icon {\n    animation: jh_icon_ignite_jh_vui_AJxDON 0.6s cubic-bezier(0.16,1,0.3,1) both;\n}\n\n\/* Accessibility: honor reduced-motion preference. Scoped to this instance\n   so it doesn't disable site-wide animations. Animations + transitions\n   collapse to ~instant; final states remain (no layout breaks). *\/\n@media (prefers-reduced-motion: reduce) {\n    #jh_vui_AJxDON *,\n    #jh_vui_AJxDON *::before,\n    #jh_vui_AJxDON *::after {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n\n<script>\n(function() {\n    'use strict';\n\n    var _id      = 'jh_vui_AJxDON';\n    var _stageId = 'jh_stage_' + _id;\n    var wrapper  = document.getElementById(_id);\n    if (!wrapper) return;\n\n    \/* \u2500\u2500 Canvas scale-to-fit \u2500\u2500 *\/\n    var CANVAS_W = 900, CANVAS_H = 580;\n    \/* Mobile uses a narrower, taller canvas so scaleAnim produces ~1.0 scale\n       instead of 0.41 \u2014 making fonts legible without CSS font-size overrides\n       fighting the transform. Reference dims match a single-column 380px stage. *\/\n    var MOB_CANVAS_W = 380, MOB_CANVAS_H = 820;\n    function isMobCanvas() { return window.innerWidth <= 1024; }\n    function scaleAnim() {\n        var layer = wrapper.querySelector('.jh-vui-video-player-layer');\n        var stage = document.getElementById(_stageId);\n        if (!layer || !stage) return;\n        var isMob = isMobCanvas();\n        \/* On mobile, canvas width = actual layer width so scale is always 1.0.\n           This means the stage fills the container exactly \u2014 no cutoff. *\/\n        var lW = layer.offsetWidth  || MOB_CANVAS_W;\n        var lH = layer.offsetHeight || MOB_CANVAS_H;\n        var cW = isMob ? lW        : CANVAS_W;\n        var cH = isMob ? MOB_CANVAS_H : CANVAS_H;\n        var s  = isMob ? 1.0       : Math.min(lW \/ cW, lH \/ cH);\n        stage.style.transform = s === 1.0 ? 'none' : 'scale(' + s + ')';\n        stage.style.transformOrigin = isMob ? 'top left' : 'center center';\n    }\n    if (window.ResizeObserver) {\n        new ResizeObserver(scaleAnim).observe(wrapper.querySelector('.jh-vui-video-player-layer'));\n    }\n    window.addEventListener('resize', scaleAnim);\n    scaleAnim();\n\n    \/* \u2500\u2500 Timing \u2500\u2500\n       Mobile values are deliberately ~3-6\u00d7 slower than desktop so the\n       \"AI generates\" sequence is humanly perceivable. Desktop preserves\n       original snappy pacing for the dense parallel column layout. *\/\n    var _IS_MOB_PACE = window.innerWidth <= 1024;\n    var WORD_MS   = _IS_MOB_PACE ? 18  : 3;\n    var BULLET_MS = _IS_MOB_PACE ? 12  : 2;\n    var SEC_PAUSE = _IS_MOB_PACE ? 320 : 5;\n    var ITEM_GAP  = _IS_MOB_PACE ? 60  : 4;\n    var SCRM_TOTAL = 820, SCRM_RATIO = 0.62;\n    var GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&<>[]{}|~';\n    var rg    = function() { return GLYPHS[Math.floor(Math.random()*GLYPHS.length)]; };\n    var sleep = function(ms){ return new Promise(function(r){ setTimeout(r,ms); }); };\n    var raf   = function(fn){ requestAnimationFrame(function(){ requestAnimationFrame(fn); }); };\n    var vis   = function(el){ el && raf(function(){ el.classList.add('vis'); }); };\n\n    \/* \u2500\u2500 Resume data \u2500\u2500 *\/\n    var KW = function(w){ return {kw:w}; };\n    var RESUME = {\n        contact: {\n            name:'ALEX R. CHEN', role:'Senior AI Engineer',\n            items:['alex.chen@neuralstack.io','+1 (415) 887-3201','San Francisco, CA','github.com\/alexrchen','linkedin.com\/in\/alexrchen'],\n        },\n        education: { degree:'M.S. Computer Science \u2014 AI \/ ML', school:'STANFORD UNIVERSITY', detail:'Graduate Research Fellowship', year:'2015\u20132017', gpa:'GPA \u00b7 3.94 \/ 4.0' },\n        summary: ['Results-driven',KW('MACHINE_LEARNING'),'engineer, 7+ years architecting',KW('LLM_PIPELINES'),'at scale. Expertise in',KW('TRANSFORMER_ARCH'),'fine-tuning,',KW('RAG_SYSTEMS'),'deployment,',KW('QUANTIZATION'),'optimisation, and end-to-end',KW('MLOps'),'workflows.'],\n        experience: [\n            { company:'ANTHROPIC SYSTEMS INC.', role:'Staff ML Engineer', date:'MAR 2022 \u2192 PRESENT',\n              bullets:[['Shipped',KW('RLHF'),'harness aligning 4 models, cutting harmful output 47%.'],['Built',KW('INFERENCE_CLUSTER'),'512 A100 GPUs, 120k req\/sec peak.'],['Authored',KW('PROMPT_ENGINEERING'),'toolkit across 14 teams, 3\u00d7 faster cycles.'],['Led',KW('RED_TEAMING'),'adversarial sprints every model release.']],\n              badge:'4 KW INJECTED \u00b7 ATS \u2191 31%' },\n            { company:'OPENAI \u2014 RESEARCH', role:'Research Engineer II', date:'AUG 2019 \u2192 FEB 2022',\n              bullets:[['Built',KW('GPT-4_EVALS'),'suite 47 domains; pioneered',KW('SPARSE_ATTENTION'),'kernels \u221222% FLOPS.'],['Implemented',KW('CONSTITUTIONAL_AI'),'self-critique loop; unified',KW('VECTOR_STORE'),'API layer.'],['Delivered',KW('EVALS_FRAMEWORK'),'drift tracking across all checkpoints.']],\n              badge:'5 KW INJECTED \u00b7 ATS \u2191 28%' },\n            { company:'GOOGLE DEEPMIND', role:'Software Engineer, AI', date:'JUN 2017 \u2192 JUL 2019',\n              bullets:[['Shipped',KW('KNOWLEDGE_DISTILLATION'),'8\u00d7 reduction;',KW('FEDERATED_LEARNING'),'SDK 40M devices.'],['Optimised',KW('TF_XLA'),'\u221218% fragmentation; 2 patents on',KW('GRADIENT_CHECKPOINTING'),'.']],\n              badge:'4 KW INJECTED \u00b7 ATS \u2191 19%' },\n        ],\n    };\n\n    \/* \u2500\u2500 Icons \u2500\u2500 *\/\n    var ICON = {\n        contact:    '<svg class=\"section-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"\/><\/svg>',\n        summary:    '<svg class=\"section-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M9 3H5a2 2 0 00-2 2v4m6-6h10a2 2 0 012 2v4M9 3v18m0 0h10a2 2 0 002-2V9M9 21H5a2 2 0 01-2-2V9m0 0h18\"\/><\/svg>',\n        experience: '<svg class=\"section-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><rect x=\"2\" y=\"7\" width=\"20\" height=\"14\" rx=\"2\"\/><path d=\"M16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2\"\/><\/svg>',\n        education:  '<svg class=\"section-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><path d=\"M12 3L1 9l11 6 9-4.91V17M5 13.18v4L12 21l7-3.82v-4\"\/><\/svg>',\n    };\n    function mkHeader(ic,t,tg){ var h=document.createElement('div'); h.className='section-header'; h.innerHTML=ICON[ic]+'<span class=\"section-title\">'+t+'<\/span><span class=\"section-tag\">'+tg+'<\/span>'; return h; }\n    function mkFade(tg,cl,tx){ var e=document.createElement(tg); e.className=cl+' fade-el'; e.textContent=tx; return e; }\n    function mkList(items){ var ul=document.createElement('ul'); ul.className='contact-list'; items.forEach(function(t){ var li=document.createElement('li'); li.className='fade-el'; li.textContent=t; ul.appendChild(li); }); return ul; }\n\n    \/* \u2500\u2500 Word drop \u2500\u2500 *\/\n    async function dropText(c,text,ms){ ms=ms||WORD_MS; var words=text.trim().split(' ').filter(Boolean); for(var i=0;i<words.length;i++){ var sp=document.createElement('span'); sp.className='wf'; sp.textContent=words[i]; c.appendChild(sp); if(i<words.length-1)c.appendChild(document.createTextNode(' ')); (function(s){raf(function(){s.classList.add('vis');});})(sp); await sleep(ms); } }\n\n    \/* \u2500\u2500 Keyword scramble \u2500\u2500 *\/\n    function scrFrame(kw,locked){ var h=''; for(var i=0;i<kw.length;i++){ var c=kw[i]; if(i<locked)h+='<span class=\"c-locked\">'+c+'<\/span>'; else if(c==='_'||c==='-'||c==='.')h+='<span class=\"c-sep\">'+c+'<\/span>'; else h+='<span class=\"c-noise\">'+rg()+'<\/span>'; } return h; }\n    function fireKeyword(c,kw){\n      var box=document.createElement('span'); box.className='kw-box';\n      var txt=document.createElement('span'); txt.className='kw-text';\n      box.append(txt);\n      c.appendChild(document.createTextNode(' ')); c.appendChild(box);\n      raf(function(){box.classList.add('vis');});\n\n      \/* Mobile: cheap letter-cascade reveal instead of rAF scramble.\n         Each char starts in c-noise color and transitions to c-locked\n         with a 22ms per-char stagger. Total reveal \u2248 kw.length \u00d7 22ms +\n         150ms tail. Pure CSS transitions \u2014 no rAF cost. *\/\n      if(window.innerWidth<=768){\n        var html = '';\n        for (var ci = 0; ci < kw.length; ci++) {\n            html += '<span class=\"kw-char\">' + (kw[ci] === ' ' ? '&nbsp;' : kw[ci]) + '<\/span>';\n        }\n        txt.innerHTML = html;\n        var charEls = txt.querySelectorAll('.kw-char');\n        raf(function() {\n            for (var i = 0; i < charEls.length; i++) {\n                (function(el, delay){\n                    setTimeout(function(){ el.classList.add('lit'); }, delay);\n                })(charEls[i], i * 22);\n            }\n        });\n        box.classList.add('kw-locked');\n        return;\n      }\n\n      \/* Desktop: full scramble animation unchanged *\/\n      var gA=document.createElement('span'); gA.className='kw-ghost-a'; gA.setAttribute('aria-hidden','true');\n      var gB=document.createElement('span'); gB.className='kw-ghost-b'; gB.setAttribute('aria-hidden','true');\n      box.prepend(gB); box.prepend(gA);\n      box.classList.add('kw-scrambling');\n      var noise=function(){var s='';for(var ch of kw)s+=(ch==='_'||ch==='-'||ch==='.')?ch:rg();return s;};\n      var t0=performance.now(),scrmEnd=SCRM_TOTAL*SCRM_RATIO;\n      (function frame(now){var el=now-t0; if(el<scrmEnd){txt.innerHTML=scrFrame(kw,0);gA.textContent=noise();gB.textContent=noise();requestAnimationFrame(frame);}else if(el<SCRM_TOTAL){if(!box.classList.contains('kw-locking')){box.classList.remove('kw-scrambling');box.classList.add('kw-locking');}var locked=Math.floor(((el-scrmEnd)\/(SCRM_TOTAL-scrmEnd))*kw.length);txt.innerHTML=scrFrame(kw,locked);gA.textContent=noise();gB.textContent=noise();requestAnimationFrame(frame);}else{txt.innerHTML='<span class=\"c-locked\">'+kw+'<\/span>';gA.textContent=kw;gB.textContent=kw;box.classList.remove('kw-scrambling','kw-locking');box.classList.add('kw-locked','kw-snap');setTimeout(function(){box.classList.remove('kw-snap');},500);}})(performance.now());\n    }\n    async function renderTokens(c,tokens,ms){ ms=ms||WORD_MS; for(var i=0;i<tokens.length;i++){var tok=tokens[i]; if(typeof tok==='string'){var l=c.lastChild;if(l&&l.nodeType===3)c.removeChild(l);await dropText(c,tok,ms);c.appendChild(document.createTextNode(' '));}else if(tok.kw){var l2=c.lastChild;if(l2&&l2.nodeType===3)c.removeChild(l2);fireKeyword(c,tok.kw);await sleep(5);}}var l3=c.lastChild;if(l3&&l3.nodeType===3)c.removeChild(l3); }\n\n    async function revealSection(el){ vis(el); await sleep(70); }\n\n    \/* \u2500\u2500 PRELOAD REDACTED STATE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       Builds the redacted skeleton immediately on page load.\n       Users see the resume shape + redaction bars instead of a black void.\n       generate() will dissolve this and replace it with the live animation. *\/\n    \/* True when the stage will render in single-column mobile layout *\/\n    function isMobileLayout() {\n        return window.innerWidth <= 1024;\n    }\n\n    function preloadRedacted() {\n        var stage = document.getElementById(_stageId);\n        if (!stage || stage.dataset.preloaded) return;\n        stage.dataset.preloaded = '1';\n        stage.innerHTML = '';\n        scaleAnim();\n\n        \/* Helper: makes a redact bar of given width *\/\n        function rb(w) {\n            var s = document.createElement('span'); s.className='jh-rb';\n            s.style.width = w; return s;\n        }\n        function rbLine(w) {\n            var d = document.createElement('div'); d.className='jh-rb-line';\n            d.style.width = w||'88%'; return d;\n        }\n        function rbKw(w) {\n            var s = document.createElement('span'); s.className='jh-rb-kw';\n            s.style.width = w; return s;\n        }\n        function hdr() {\n            var h = document.createElement('div'); h.className='jh-redact-hdr';\n            var ic = document.createElement('div'); ic.className='jh-redact-hdr-icon';\n            var b1 = document.createElement('div'); b1.className='jh-redact-hdr-bar';\n            var b2 = document.createElement('div'); b2.className='jh-redact-hdr-bar2';\n            h.append(ic,b1,b2); return h;\n        }\n        function sec() {\n            var s = document.createElement('div'); s.className='jh-redact-section';\n            s.appendChild(hdr()); return s;\n        }\n\n        if (isMobileLayout()) {\n            \/* \u2500\u2500 MOBILE: single column, order: contact \u2192 experience \u2192 education \u2500\u2500 *\/\n            var colMain = document.createElement('div'); colMain.className='col-main';\n            stage.appendChild(colMain);\n\n            var cSec = sec(); colMain.appendChild(cSec);\n            var nm = document.createElement('div'); nm.className='jh-rb-name'; cSec.appendChild(nm);\n            cSec.appendChild(rbLine('52%'));\n            [['82%'],['62%'],['70%'],['58%']].forEach(function(w){\n                var li = document.createElement('div');\n                li.style.cssText = 'display:flex;align-items:center;gap:6px;margin-bottom:5px;';\n                var dot = document.createElement('span');\n                dot.style.cssText = 'width:4px;height:4px;border-radius:50%;background:rgba(5,84,242,0.6);flex-shrink:0;';\n                li.append(dot, rbLine(w[0])); cSec.appendChild(li);\n            });\n\n            var xSec = sec(); colMain.appendChild(xSec);\n            [{c:'58%',r:'40%',bullets:2},{c:'52%',r:'36%',bullets:2}].forEach(function(job,ji){\n                var entry = document.createElement('div');\n                entry.style.cssText = 'padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid rgba(5,84,242,0.12);';\n                if (ji===1) entry.style.borderBottom = 'none';\n                var meta = document.createElement('div'); meta.style.cssText='display:flex;justify-content:space-between;margin-bottom:5px;';\n                var left = document.createElement('div');\n                var cBar = document.createElement('div'); cBar.className='jh-rb-line'; cBar.style.cssText='width:'+job.c+';margin-bottom:4px;height:0.8em;';\n                var rBar = document.createElement('div'); rBar.className='jh-rb-line'; rBar.style.cssText='width:'+job.r+';height:0.55em;background:rgba(96,176,255,0.35);';\n                left.append(cBar,rBar);\n                var dBar = document.createElement('div'); dBar.className='jh-rb-line'; dBar.style.cssText='width:62px;height:0.5em;background:rgba(255,255,255,0.12);margin-top:3px;';\n                meta.append(left,dBar); entry.appendChild(meta);\n                for (var b=0;b<job.bullets;b++){\n                    var bRow = document.createElement('div'); bRow.style.cssText='display:flex;align-items:center;gap:6px;margin-bottom:4px;';\n                    var bullet = document.createElement('span'); bullet.style.cssText='color:#0554F2;font-size:7px;flex-shrink:0;'; bullet.textContent='\u25b8';\n                    bRow.append(bullet, rb('30px'), rbKw('60px'), rb('48px'));\n                    entry.appendChild(bRow);\n                }\n                xSec.appendChild(entry);\n            });\n\n            var eSec = sec(); colMain.appendChild(eSec);\n            eSec.appendChild(rbLine('78%'));\n            eSec.appendChild(rbLine('44%'));\n            var erow = document.createElement('div'); erow.style.cssText='display:flex;gap:8px;margin-top:4px;';\n            erow.append(rbLine('30%'), rbLine('38%')); eSec.appendChild(erow);\n\n        } else {\n            \/* \u2500\u2500 DESKTOP: original two-column layout \u2500\u2500 *\/\n            var colL = document.createElement('div'); colL.className='col-left';\n            var colR = document.createElement('div'); colR.className='col-right';\n            stage.append(colL, colR);\n\n            \/* \u2500\u2500 LEFT: contact \u2500\u2500 *\/\n            var cSec = sec(); colL.appendChild(cSec);\n            var nm = document.createElement('div'); nm.className='jh-rb-name'; cSec.appendChild(nm);\n            cSec.appendChild(rbLine('52%'));\n            [['82%'],['62%'],['70%'],['58%'],['74%']].forEach(function(w){\n                var li = document.createElement('div');\n                li.style.cssText = 'display:flex;align-items:center;gap:6px;margin-bottom:5px;';\n                var dot = document.createElement('span');\n                dot.style.cssText = 'width:4px;height:4px;border-radius:50%;background:rgba(5,84,242,0.6);flex-shrink:0;';\n                li.append(dot, rbLine(w[0])); cSec.appendChild(li);\n            });\n\n            \/* \u2500\u2500 LEFT: education \u2500\u2500 *\/\n            var eSec = sec(); colL.appendChild(eSec);\n            eSec.appendChild(rbLine('78%'));\n            eSec.appendChild(rbLine('44%'));\n            eSec.appendChild(rbLine('66%'));\n            var row = document.createElement('div'); row.style.cssText='display:flex;gap:8px;margin-top:4px;';\n            row.append(rbLine('30%'), rbLine('38%')); eSec.appendChild(row);\n\n            \/* \u2500\u2500 RIGHT: summary \u2500\u2500 *\/\n            var sSec = sec(); colR.appendChild(sSec);\n            ['88%','72%','94%','68%','82%','76%'].forEach(function(w,i) {\n                var row2 = document.createElement('div'); row2.style.marginBottom='4px';\n                if (i===0 || i===2 || i===4) {\n                    var pre = rb(String(parseInt(w)-22)+'px'); pre.style.width='';\n                    row2.append(rb('52px'), rbKw('88px'), rb('34px'), rbKw('72px'));\n                } else {\n                    row2.appendChild(rbLine(w));\n                }\n                sSec.appendChild(row2);\n            });\n\n            \/* \u2500\u2500 RIGHT: experience \u2500\u2500 *\/\n            var xSec = sec(); colR.appendChild(xSec);\n        \/* Three job entries, each with company bar, role bar, bullet lines *\/\n        [{c:'58%',r:'40%',bullets:3},{c:'52%',r:'36%',bullets:3},{c:'44%',r:'32%',bullets:2}].forEach(function(job,ji){\n            var entry = document.createElement('div');\n            entry.style.cssText = 'padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid rgba(5,84,242,0.12);';\n            if (ji===2) entry.style.borderBottom = 'none';\n            var meta = document.createElement('div'); meta.style.cssText='display:flex;justify-content:space-between;margin-bottom:6px;';\n            var left = document.createElement('div');\n            var cBar = document.createElement('div'); cBar.className='jh-rb-line'; cBar.style.cssText='width:'+job.c+';margin-bottom:4px;height:0.8em;';\n            var rBar = document.createElement('div'); rBar.className='jh-rb-line'; rBar.style.cssText='width:'+job.r+';height:0.55em;background:rgba(96,176,255,0.35);';\n            left.append(cBar,rBar);\n            var dBar = document.createElement('div'); dBar.className='jh-rb-line'; dBar.style.cssText='width:62px;height:0.5em;background:rgba(255,255,255,0.12);margin-top:3px;';\n            meta.append(left,dBar); entry.appendChild(meta);\n            for (var b=0;b<job.bullets;b++){\n                var bRow = document.createElement('div'); bRow.style.cssText='display:flex;align-items:center;gap:6px;margin-bottom:4px;';\n                var bullet = document.createElement('span'); bullet.style.cssText='color:#0554F2;font-size:7px;flex-shrink:0;'; bullet.textContent='\u25b8';\n                bRow.append(bullet, rb('30px'), rbKw('60px'), rb('48px'));\n                entry.appendChild(bRow);\n            }\n            xSec.appendChild(entry);\n        });\n        } \/* end desktop else *\/\n\n        \/* \u2500\u2500 Footer bar \u2500\u2500 *\/\n        var foot = document.createElement('div'); foot.className='resume-footer'; foot.style.opacity='1';\n        var fsig = document.createElement('div'); fsig.className='footer-sig';\n        fsig.innerHTML='\/\/ NEURAL_PARSE \u00b7 <span>SIGNAL_LOCKED \u00b7 CLEARANCE_REQUIRED<\/span>';\n        var piw = document.createElement('div'); piw.className='pips-wrap';\n        piw.innerHTML='<span class=\"pip-label\">KW_DENSITY<\/span><div class=\"kw-pips\" style=\"display:flex;gap:2px\">'\n            +Array(18).fill('<span class=\"pip\" style=\"background:rgba(5,84,242,0.25)\"><\/span>').join('')+'<\/div>';\n        foot.append(fsig,piw); stage.appendChild(foot);\n    }\n\n    \/* \u2500\u2500 Generate (live resume animation) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n       1. Adds .dissolving class \u2192 CSS fades out all redact bars + status overlay\n       2. After 480ms dissolve: wipes stage and builds real animated content   *\/\n    async function generate() {\n        var stage = document.getElementById(_stageId);\n        if (!stage) return;\n\n        \/* Dissolve the redacted state first *\/\n        var overlay = wrapper.querySelector('.jh-vui-status-overlay');\n        stage.classList.add('dissolving');\n        if (overlay) overlay.classList.add('dissolving');\n        \/* Lift pre-animation greyscale \u2014 scale is handled by GSAP from here *\/\n        var playerLayer = document.querySelector('#jh_vui_AJxDON .jh-vui-video-player-layer');\n        if (playerLayer) { playerLayer.classList.add('jh-vui-revealing'); }\n        await sleep(480); \/* match the 0.45s CSS transition *\/\n\n        stage.innerHTML = '';\n        stage.classList.remove('dissolving');\n        scaleAnim();\n\n        var isMob = isMobileLayout();\n        var colL, colR, colMain;\n\n        if (isMob) {\n            \/* Mobile: single column container *\/\n            colMain = document.createElement('div'); colMain.className='col-main';\n            stage.appendChild(colMain);\n        } else {\n            colL=document.createElement('div'); colL.className='col-left';\n            colR=document.createElement('div'); colR.className='col-right';\n            stage.append(colL,colR);\n        }\n\n        \/* Helper: append section to correct column *\/\n        function appendL(s){ if(isMob) colMain.appendChild(s); else colL.appendChild(s); }\n        function appendR(s){ if(isMob) colMain.appendChild(s); else colR.appendChild(s); }\n\n        \/* Contact \u2014 always first *\/\n        var cSec=document.createElement('section'); cSec.className='resume-section';\n        cSec.appendChild(mkHeader('contact','Contact','[VERIFIED]'));\n        var nEl=mkFade('div','contact-name',RESUME.contact.name), rEl=mkFade('div','contact-role',RESUME.contact.role), cList=mkList(RESUME.contact.items);\n        cSec.append(nEl,rEl,cList); appendL(cSec);\n        await revealSection(cSec); vis(nEl);\n        await sleep(_IS_MOB_PACE ? 120 : 0); vis(rEl);\n        cList.querySelectorAll('li').forEach(function(li,i){setTimeout(function(){vis(li);},i*ITEM_GAP);});\n        await sleep(SEC_PAUSE);\n\n        \/* Summary \u2014 desktop: left sidebar | mobile: skip (keep it concise) *\/\n        if (!isMob) {\n            var sSec=document.createElement('section'); sSec.className='resume-section';\n            sSec.appendChild(mkHeader('summary','Professional Summary','[6KW]'));\n            var sPara=document.createElement('p'); sPara.className='summary-para'; sSec.appendChild(sPara); appendR(sSec);\n            await revealSection(sSec); await renderTokens(sPara,RESUME.summary,WORD_MS); await sleep(SEC_PAUSE);\n        }\n\n        \/* Experience \u2014 mobile: second (the main content) *\/\n        var xSec=document.createElement('section'); xSec.className='resume-section';\n        xSec.appendChild(mkHeader('experience','Work Experience','[13KW \u00b7 3 ENTRIES]'));\n        appendR(xSec); await revealSection(xSec);\n        for(var ei=0;ei<RESUME.experience.length;ei++){\n            var exp=RESUME.experience[ei];\n            var entry=document.createElement('div'); entry.className='exp-entry';\n            var mr=document.createElement('div'); mr.className='exp-meta-row';\n            var ml=document.createElement('div');\n            var coEl=mkFade('div','exp-company',exp.company), rlEl=mkFade('div','exp-role',exp.role);\n            ml.append(coEl,rlEl); var dtE=mkFade('div','exp-date',exp.date); mr.append(ml,dtE);\n            var ul=document.createElement('ul'); ul.className='exp-bullets';\n            var badge=document.createElement('div'); badge.className='inject-badge'; badge.textContent=exp.badge;\n            entry.append(mr,ul,badge); xSec.appendChild(entry);\n            vis(coEl);\n            if (_IS_MOB_PACE) { await sleep(80); }\n            vis(rlEl);\n            if (_IS_MOB_PACE) { await sleep(80); }\n            vis(dtE);\n            for(var bi=0;bi<exp.bullets.length;bi++){ var li=document.createElement('li'); var bs=document.createElement('span'); bs.className='bullet-span'; li.appendChild(bs); ul.appendChild(li); await renderTokens(bs,exp.bullets[bi],BULLET_MS); }\n            vis(badge); await sleep(ITEM_GAP);\n        }\n        await sleep(SEC_PAUSE);\n\n        \/* Education \u2014 mobile only: show after experience as last section *\/\n        if (isMob) {\n            var eSec=document.createElement('section'); eSec.className='resume-section';\n            eSec.appendChild(mkHeader('education','Education','[VERIFIED]'));\n            var edu=RESUME.education, eb=document.createElement('div'); eb.className='edu-block';\n            var dEl=mkFade('div','edu-degree',edu.degree), sEl=mkFade('div','edu-school',edu.school);\n            var rowEl=document.createElement('div'); rowEl.className='edu-row fade-el';\n            rowEl.innerHTML='<span class=\"edu-year\">'+edu.year+'<\/span><span class=\"edu-gpa\">'+edu.gpa+'<\/span>';\n            eb.append(dEl,sEl,rowEl); eSec.appendChild(eb); colMain.appendChild(eSec);\n            await revealSection(eSec); vis(dEl);await sleep(ITEM_GAP);vis(sEl);await sleep(ITEM_GAP);vis(rowEl);await sleep(SEC_PAUSE);\n        }\n\n        \/* Footer *\/\n        var footer=document.createElement('footer'); footer.className='resume-footer';\n        footer.innerHTML='<div class=\"footer-sig\">\/\/ NEURAL_PARSE \u00b7 <span>DEEP_SIGNAL_INJECTION<\/span> \u00b7 ALL VECTORS ALIGNED<\/div><div class=\"pips-wrap\"><span class=\"pip-label\">KW_DENSITY<\/span><div class=\"kw-pips\" id=\"kw_pips_'+_id+'\"><\/div><span class=\"pip-count\">18\/18<\/span><\/div>';\n        stage.appendChild(footer); vis(footer);\n        var pEl=document.getElementById('kw_pips_'+_id);\n        if(pEl) for(var pi=0;pi<18;pi++){ var p=document.createElement('span'); p.className='pip'; pEl.appendChild(p); (function(pip,d){setTimeout(function(){pip.classList.add('lit');},d);})(p,40+pi*18); }\n    }\n\n    \/* \u2500\u2500 GSAP scroll animation \u2500\u2500 *\/\n    function initGSAP() {\n        if (wrapper.dataset.jhInitialized) return;\n        if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;\n\n        gsap.registerPlugin(ScrollTrigger);\n\n        var video = wrapper.querySelector('.jh-vui-video');\n        if (video) video.play().catch(function(){});\n\n        var mm = gsap.matchMedia();\n        mm.add({ isDesktop:'(min-width: 1025px)', isMobile:'(max-width: 1024px)' }, function(context) {\n            if (context.conditions.isDesktop) {\n                var videoLayer      = wrapper.querySelector('.jh-vui-video-player-layer');\n                var glassLayer      = wrapper.querySelector('.jh-vui-glass-reflection');\n                var bgLayer         = wrapper.querySelector('.jh-vui-ui-background-layer');\n                var scrollContainer = wrapper.querySelector('.jh-vui-scroll-container');\n                var stickyWrapper   = wrapper.querySelector('.jh-vui-sticky-wrapper');\n                var titleEl         = wrapper.querySelector('.jh-vui-title-overlay'); \/* P2-1b *\/\n\n                \/* Set wrapper visible (original behaviour) *\/\n                gsap.set(stickyWrapper, { opacity: 1 });\n\n                \/*\n                 * START: full-size centred.\n                 * CSS already has transform:translate(-50%,-50%) as fallback.\n                 * GSAP takes over with identical xPercent\/yPercent so there is\n                 * no visual jump. scale:1, x:0 = no extra movement at start.\n                 *\/\n                gsap.set([videoLayer, glassLayer], {\n                    xPercent: -50, yPercent: -50,\n                    x: 0, y: 0, scale: 1.0,\n                    transformOrigin: 'center center',\n                });\n                gsap.set(bgLayer, { opacity: 0, scale: 1.1, y: 0 });\n                if (titleEl) gsap.set(titleEl, { opacity: 1 }); \/* P2-1b: visible during dead zone *\/\n\n                var tl = gsap.timeline({\n                    scrollTrigger: {\n                        trigger:             scrollContainer,\n                        start:               'top top',\n                        end:                 'bottom bottom',\n                        scrub:               1.5,\n                        pin:                 stickyWrapper,\n                        pinSpacing:          true,\n                        invalidateOnRefresh: true,\n                        onUpdate:            scaleAnim,\n                        \/* Fix 2: generate() fires on the exact frame the section pins.\n                           The resume starts building at lock-in, so the user's next\n                           scroll drives through the dead zone while content appears \u2014\n                           creating the perception they triggered the animation. *\/\n                        onEnter: function() {\n                            if (!generated) { generated = true; generate(); }\n                        },\n                    }\n                });\n\n                \/*\n                 * TIMELINE \u2014 4 units over 400vh effective scroll (500vh - 100vh pin)\n                 *   1 unit = 100vh = 1 \"scroll\" worth of travel\n                 *\n                 *   0-1  (1 scroll):  DEAD ZONE \u2014 section pins, resume stationary.\n                 *                     User feels the lock, primed for the reveal.\n                 *   1-3  (2 scrolls): CONVERGENCE \u2014 resume glides to right,\n                 *                     shrinks to 0.52, app-UI background rises.\n                 *   3-4  (1 scroll):  HOLD at final nested resting state.\n                 *\/\n                tl\n                    .to({}, { duration: 1.0 })\n\n                    .to(bgLayer, { opacity:1, scale:0.88, y:-18, x: function(){ return -(window.innerWidth * 0.02); }, duration:2.0, ease:'power2.inOut' }, 1.0)\n\n                    .to(videoLayer, {\n                        scale: 0.52,\n                        xPercent: -50, yPercent: -50,\n                        x: function(){ return window.innerWidth * 0.21; },\n                        y: 68,\n                        boxShadow: '0 20px 80px rgba(0,0,0,0.5), 0 0 30px rgba(5,84,242,0.2)',\n                        duration: 2.0, ease: 'power2.inOut', force3D: true,\n                    }, 1.0)\n\n                    \/* Dissolve: grey frame fades away as dock completes.\n                       anim-outer keeps its own dark bg so resume stays visible. *\/\n                    .to(videoLayer, {\n                        backgroundColor: 'rgba(0,0,0,0)',\n                        borderColor:     'rgba(255,255,255,0)',\n                        boxShadow:       '0 0 0 1px rgba(255,255,255,0.05), 0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(5,84,242,0.15)',\n                        duration: 1.2, ease: 'power2.inOut',\n                    }, 2.2)\n                    .to(wrapper.querySelector('.jh-vui-anim-outer'), {\n                        backgroundColor: 'rgba(0,0,0,0)',\n                        duration: 1.2, ease: 'power2.inOut',\n                    }, 2.2)\n                    .to({}, { duration: 1.0 });\n\n                \/* P2-1b: title fades in lockstep with the scrubbed convergence \u2014\n                   early quick exit as motion starts (1.0\u21921.9), gone well before\n                   the bg image resolves at 3.0. Guarded; additive (no existing\n                   tween altered). *\/\n                if (titleEl) tl.to(titleEl, { opacity: 0, duration: 0.9, ease: 'power2.in' }, 1.0);\n\n            } else {\n                \/\/ Mobile\/tablet: standalone card \u2014 no scroll pinning, no convergence.\n                \/\/ Show the resume animation when the card enters the viewport.\n                \/\/ generate() populates the stage; scaleAnim() keeps it fitted.\n                var mobileGenerated = false;\n                var mobilePlayer = wrapper.querySelector('.jh-vui-video-player-layer');\n\n                \/* \u2500\u2500 P-VUI-MOBILE-CUE (additive, 2026-05-26) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n                 * Mobile\/tablet analog of the desktop scroll-driven tailoring cue.\n                 * Desktop is scroll-POSITION-driven over a pinned 350vh container;\n                 * mobile\/tablet is a STATIC 820px auto-play card, so the cue is driven\n                 * by the build LIFECYCLE instead: a blue \"Tailoring resume\u2026\" cue\n                 * reveals at the TOP when the card enters view, then on generate()\n                 * completion it fades out and a green \"Tailored \u2713\" cue fades in at the\n                 * BOTTOM (the two-endpoint reveal the user picked). Same clarity goal\n                 * as the desktop refactor \u2014 show WHAT the animation represents.\n                 * Reuses the desktop cue's inner .jh-vui-tailor-* styling (ungated);\n                 * CSS is JS-injected so the optimizer can't tree-shake the new\n                 * selectors. Additive only \u2014 it does NOT touch the build, just reads\n                 * its start (IO) and end (the mobile generate() promise). *\/\n                var mcue = (function(){\n                    var ID = 'jh_vui_AJxDON';\n                    if (!mobilePlayer) return null;\n                    if (!document.getElementById('jh-vui-mcue-css-' + ID)) {\n                        var st = document.createElement('style');\n                        st.id = 'jh-vui-mcue-css-' + ID;\n                        st.textContent =\n                            '@media (max-width:1024px){'\n                          + '#'+ID+' .jh-vui-mcue{position:absolute;left:50%;z-index:12;pointer-events:none;'\n                          + 'width:min(340px,82vw);box-sizing:border-box;display:flex;flex-direction:column;gap:8px;align-items:center;'\n                          + 'padding:12px 16px;border-radius:12px;background:rgba(5,10,20,0.74);'\n                          + '-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);'\n                          + 'border:1px solid rgba(96,176,255,0.22);'\n                          + 'box-shadow:0 8px 30px rgba(0,0,0,0.5),inset 0 0 22px rgba(5,84,242,0.10);'\n                          + \"font-family:'Geist Mono','JetBrains Mono','Courier New',monospace;\"\n                          + 'opacity:0;filter:blur(4px);transform:translateX(-50%) translateY(6px);'\n                          + 'transition:opacity .5s cubic-bezier(0.16,1,0.3,1),filter .5s cubic-bezier(0.16,1,0.3,1),transform .5s cubic-bezier(0.16,1,0.3,1);}'\n                          + '#'+ID+' .jh-vui-mcue--top{top:16px;}'\n                          + '#'+ID+' .jh-vui-mcue--bottom{bottom:16px;}'\n                          + '#'+ID+' .jh-vui-mcue.show{opacity:1;filter:blur(0);transform:translateX(-50%) translateY(0);}'\n                          + '#'+ID+' .jh-vui-mcue--top .jh-vui-tailor-fill{transition:transform 12s linear;}'\n                          + '#'+ID+' .jh-vui-mcue--bottom .jh-vui-tailor-fill{background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 14px rgba(34,197,94,0.6);}'\n                          + '#'+ID+' .jh-vui-mcue--bottom .jh-vui-tailor-dot{background:#22c55e;box-shadow:0 0 11px rgba(34,197,94,0.85);animation:none;}'\n                          + '#'+ID+' .jh-vui-mcue--bottom .jh-vui-tailor-label{color:#22c55e;}'\n                          \/* Clear band (2026-05-26): while the top \"Tailoring resume\u2026\" cue is\n                             showing, push the resume content below it so the cue floats in its own\n                             strip and no longer overlaps the CONTACT\/name section. Toggled via\n                             .jh-vui-cue-clear on the (stable) player layer in showTop()\/done(); the\n                             transition lets the content settle back up smoothly when the cue clears\n                             (the green \"done\" cue is at the bottom, so the top returns to flush).\n                             Stage is height:auto so it just grows \u2014 nothing clips. Gated \u22641024 with\n                             the cue, so it also covers tablet. *\/\n                          + '#'+ID+' .jh-vui-stage{transition:padding .55s cubic-bezier(0.16,1,0.3,1);}'\n                          + '#'+ID+' .jh-vui-video-player-layer.jh-vui-cue-clear .jh-vui-stage{padding-top:116px !important;}'\n                          \/* Same clear-band treatment for the BOTTOM green \"Tailored \u2713\" cue: on\n                             done() the top band collapses and this opens an equal band at the bottom\n                             so the (persistent) green cue floats clear of the last section (Education)\n                             instead of overlapping it. 116px on both sides \u2192 the band just relocates\n                             top\u2192bottom with no net card-height change. *\/\n                          + '#'+ID+' .jh-vui-video-player-layer.jh-vui-cue-clear-bottom .jh-vui-stage{padding-bottom:116px !important;}'\n                          + '}'\n                          + '@media (min-width:1025px){#'+ID+' .jh-vui-mcue{display:none !important;}}';\n                        (document.head||document.documentElement).appendChild(st);\n                    }\n                    function build(pos, label){\n                        var existing = mobilePlayer.querySelector('.jh-vui-mcue--' + pos);\n                        if (existing) return existing;   \/* reuse on matchMedia re-run *\/\n                        var c = document.createElement('div');\n                        c.className = 'jh-vui-mcue jh-vui-mcue--' + pos;\n                        c.setAttribute('aria-hidden','true');\n                        c.innerHTML =\n                            '<div class=\"jh-vui-tailor-id\">One-Click Resume Tailoring<\/div>'\n                          + '<div class=\"jh-vui-tailor-status\"><span class=\"jh-vui-tailor-dot\"><\/span><span class=\"jh-vui-tailor-label\">'+label+'<\/span><\/div>'\n                          + '<div class=\"jh-vui-tailor-meter\"><span class=\"jh-vui-tailor-fill\"><\/span><\/div>';\n                        mobilePlayer.appendChild(c);\n                        return c;\n                    }\n                    var topC = build('top', 'Tailoring resume\u2026');\n                    var botC = build('bottom', 'Tailored \u2713');\n                    var topFill = topC.querySelector('.jh-vui-tailor-fill');\n                    var botFill = botC.querySelector('.jh-vui-tailor-fill');\n                    if (botFill) botFill.style.transform = 'scaleX(1)';   \/* done = full meter *\/\n                    return {\n                        showTop: function(){\n                            topC.classList.add('show');\n                            mobilePlayer.classList.add('jh-vui-cue-clear');   \/* push resume content below the cue band *\/\n                            \/* ramp the meter once visible (CSS 12s transition paces the build) *\/\n                            if (topFill) requestAnimationFrame(function(){ topFill.style.transform = 'scaleX(0.85)'; });\n                        },\n                        done: function(){\n                            if (botC.classList.contains('show')) return;   \/* idempotent *\/\n                            if (topFill) topFill.style.transform = 'scaleX(1)';\n                            topC.classList.remove('show');\n                            mobilePlayer.classList.remove('jh-vui-cue-clear');          \/* collapse the top band as the top cue clears *\/\n                            mobilePlayer.classList.add('jh-vui-cue-clear-bottom');       \/* open an equal band at the bottom for the green \"Tailored \u2713\" cue *\/\n                            botC.classList.add('show');\n                        }\n                    };\n                })();\n\n                var mobileIO = new IntersectionObserver(function(entries) {\n                    entries.forEach(function(entry) {\n                        if (entry.isIntersecting && !mobileGenerated) {\n                            mobileGenerated = true;\n                            mobileIO.disconnect();\n                            if (mcue) mcue.showTop();   \/* \"Tailoring resume\u2026\" reveals at top *\/\n                            \/\/ Small delay so card is fully in view before animation starts\n                            setTimeout(function() {\n                                if (mobilePlayer) {\n                                    mobilePlayer.classList.add('jh-vui-revealing');\n                                }\n                                var gp = generate();\n                                scaleAnim(); \/\/ fit stage to container\n                                \/* swap to the green \"Tailored \u2713\" cue at the bottom when the\n                                   build resolves; safety timeout covers any non-promise path *\/\n                                if (mcue) {\n                                    if (gp && typeof gp.then === 'function') { gp.then(function(){ mcue.done(); }); }\n                                    setTimeout(function(){ mcue.done(); }, 16000);\n                                }\n                            }, 300);\n                        }\n                    });\n                }, { threshold: 0.3 });\n\n                if (mobilePlayer) mobileIO.observe(mobilePlayer);\n            }\n        });\n\n        wrapper.dataset.jhInitialized = 'true';\n    }\n\n    \/* \u2500\u2500 Boot \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     * 1. preloadRedacted() runs immediately \u2014 fills the black void with the\n     *    classified-document skeleton so users never see a blank section.\n     * 2. Status overlay (\"CLEARANCE REQUIRED\") is injected into sticky wrapper.\n     * 3. Poll for GSAP (max 3s) so centering fires before user scrolls.\n     * 4. generate() fires via ScrollTrigger onEnter (the pin moment). *\/\n\n    \/* Step 0: Escape Elementor column\/widget width constraints.\n       Walk up the DOM from the wrapper and force every Elementor\n       container element to full width. This fixes the 50% width\n       issue caused by the adjacent header widget's max-width:850px\n       telling Elementor the shared column only needs to be that wide. *\/\n    (function() {\n        var el = wrapper.parentNode;\n        var safetyLimit = 10; \/* never walk more than 10 levels up *\/\n        while (el && el !== document.body && safetyLimit-- > 0) {\n            var cls = el.className || '';\n            \/* Target Elementor's injected container divs only *\/\n            if (typeof cls === 'string' && (\n                cls.indexOf('elementor-widget-container') !== -1 ||\n                cls.indexOf('elementor-widget') !== -1 ||\n                cls.indexOf('elementor-column') !== -1 ||\n                cls.indexOf('elementor-col-') !== -1 ||\n                cls.indexOf('e-col-') !== -1\n            )) {\n                el.style.setProperty('width', '100%', 'important');\n                el.style.setProperty('max-width', '100%', 'important');\n                el.style.setProperty('padding-left', '0', 'important');\n                el.style.setProperty('padding-right', '0', 'important');\n                el.style.setProperty('overflow', 'visible', 'important');\n            }\n            el = el.parentNode;\n        }\n    })();\n\n    \/* Step 1: build redacted state immediately on page load *\/\n    preloadRedacted();\n\n    \/* Step 2.5: IntersectionObserver \u2014 blooms redacted bars AND lifts the\n       desktop player-layer grayscale\/opacity at the same moment.\n       rootMargin '-25% 0px -25% 0px' shrinks the effective viewport to\n       its central 50% \u2014 so the bloom fires only when the wrapper has\n       scrolled into the focal zone, not while it's barely peeking from\n       the bottom. This is viewport-relative (works for any wrapper\n       height); a wrapper-relative threshold can't exceed viewport_h \/\n       wrapper_h, which on desktop is ~20% for a 4500px-tall wrapper.\n\n       Adding .jh-vui-revealing here (in addition to inside generate()) is\n       what makes the bright-blue placeholder visible on desktop \u2014 without\n       it, the CSS bloom values get killed by `filter: grayscale(85%)\n       brightness(0.6)` on .jh-vui-pre-anim. Mobile already forces\n       filter:none\/opacity:1 via the @media (max-width:1024px) override,\n       so the extra class-add is a no-op there. *\/\n    (function() {\n        function bloom() {\n            wrapper.classList.add('jh-vui-in-view');\n            var playerLayer = wrapper.querySelector('.jh-vui-video-player-layer');\n            if (playerLayer) playerLayer.classList.add('jh-vui-revealing');\n        }\n        \/* Mobile\/tablet (max-width: 1024px) gets a delayed bloom so the\n           preceding eyebrow \u2192 title \u2192 description fade-in completes first.\n           The header's own IO trigger is late (fires when title is near\n           viewport top), so the natural scroll cadence already orders\n           things \u2014 but at fast scroll speeds the resume bloom can outrun\n           the title. The 900ms wait covers the ~550ms title fade plus\n           normal-pace scroll travel from header into resume. Desktop has\n           the GSAP scroll-pin handling its own sequencing, so no delay. *\/\n        function triggerBloom() {\n            if (window.innerWidth <= 1024) {\n                setTimeout(bloom, 900);\n            } else {\n                bloom();\n            }\n        }\n        if (!window.IntersectionObserver) { triggerBloom(); return; }\n        var io = new IntersectionObserver(function(entries) {\n            entries.forEach(function(e) {\n                if (e.isIntersecting) {\n                    triggerBloom();\n                    io.disconnect();\n                }\n            });\n        }, { threshold: 0, rootMargin: '-25% 0px -25% 0px' });\n        io.observe(wrapper);\n    })();\n\n    \/* Step 3: poll for GSAP *\/\n    var tries = 0;\n    var poll = setInterval(function(){\n        tries++;\n        initGSAP();\n        if (wrapper.dataset.jhInitialized || tries >= 30) clearInterval(poll);\n    }, 100);\n\n    \/* generate() is called by ScrollTrigger onEnter (section pin moment).\n       The dissolve + live animation replace the redacted skeleton. *\/\n    var generated = false;\n\n    \/* Also listen for event from components.js JHVideoUI onEnter *\/\n    wrapper.addEventListener('jh-vui-enter', function() {\n        if (!generated) { generated = true; generate(); }\n    }, { once: true });\n\n})();\n<\/script>\n\n<script>\n\/* \u2500\u2500 P-VUI-TAILOR-CUE (additive, 2026-05-25) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Opening-frame redesign + scroll affordance. Relocates the \"One-Click Resume\n * Tailoring\" identity OFF the resume blocks into a bottom HUD card, retires the\n * old floating title + \"CLEARANCE REQUIRED\" pill (desktop), and adds a\n * scroll-POSITION-driven, REVERSIBLE \"TAILORING\" progress cue.\n * Motion-audited (Jakub\/Jhey\/Emil): GPU scaleX meter (not width); materialize-in\n * (opacity+translateY+blur); scroll-coupled fade-out; interruptible (driven by\n * scroll position, not one-shot toggles, so it reverses on scroll-up); green\n * \"matched\" completion beat (#22c55e); reduced-motion keeps the text instruction\n * (motion collapses via the instance's existing prefers-reduced-motion block).\n * APPEND-ONLY \u2014 does NOT touch the float timeline. Desktop only (pin >=1025px).\n * CSS is JS-injected so the server-side optimizer can't tree-shake new selectors. *\/\n(function(){\n    var ID   = 'jh_vui_AJxDON';\n    var wrap = document.getElementById(ID);\n    if (!wrap) return;\n    var sticky = wrap.querySelector('.jh-vui-sticky-wrapper');\n    var sc     = wrap.querySelector('.jh-vui-scroll-container');\n    if (!sticky || !sc) return;\n\n    \/* 1. Inject styles (tree-shake-safe) *\/\n    if (!document.getElementById('jh-vui-tailorcue-css-' + ID)) {\n        var st = document.createElement('style');\n        st.id = 'jh-vui-tailorcue-css-' + ID;\n        st.textContent =\n            '#'+ID+' .jh-vui-tailor-hud{position:absolute;left:50%;bottom:130px;z-index:11;pointer-events:none;'\n          + 'width:min(360px,84vw);display:flex;flex-direction:column;gap:9px;align-items:center;'\n          + 'padding:13px 18px;border-radius:12px;background:rgba(5,10,20,0.66);'\n          + '-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);'\n          + 'border:1px solid rgba(96,176,255,0.22);'\n          + 'box-shadow:0 8px 30px rgba(0,0,0,0.45),inset 0 0 22px rgba(5,84,242,0.10);'\n          + \"font-family:'Geist Mono','JetBrains Mono','Courier New',monospace;\"\n          + 'opacity:0;transform:translateX(-50%) translateY(6px);filter:blur(4px);'\n          + 'transition:opacity .45s cubic-bezier(0.16,1,0.3,1),filter .45s cubic-bezier(0.16,1,0.3,1);}'\n          + '#'+ID+' .jh-vui-tailor-hud.in{opacity:1;transform:translateX(-50%) translateY(0);filter:blur(0);}'\n          + '#'+ID+' .jh-vui-tailor-hud.dim{opacity:0 !important;}'\n          + '#'+ID+' .jh-vui-tailor-id{font-size:8.5px;font-weight:700;letter-spacing:0.24em;text-transform:uppercase;color:rgba(96,176,255,0.9);}'\n          + '#'+ID+' .jh-vui-tailor-status{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.85);}'\n          + '#'+ID+' .jh-vui-tailor-dot{width:6px;height:6px;border-radius:50%;background:#60B0FF;box-shadow:0 0 8px rgba(96,176,255,0.85);flex-shrink:0;transition:background .4s cubic-bezier(0.16,1,0.3,1),box-shadow .4s cubic-bezier(0.16,1,0.3,1),transform .4s cubic-bezier(0.16,1,0.3,1);animation:jh-vui-tailor-pulse 1.8s ease-in-out infinite;}'\n          + '@keyframes jh-vui-tailor-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.65);}}'\n          + '#'+ID+' .jh-vui-tailor-label{transition:color .4s cubic-bezier(0.16,1,0.3,1);}'\n          + '#'+ID+' .jh-vui-tailor-meter{width:100%;height:3px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,0.09);}'\n          + '#'+ID+' .jh-vui-tailor-fill{display:block;width:100%;height:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#0554F2,#60B0FF);box-shadow:0 0 8px rgba(5,84,242,0.5);transition:background .4s cubic-bezier(0.16,1,0.3,1),box-shadow .4s cubic-bezier(0.16,1,0.3,1);}'\n          + '#'+ID+' .jh-vui-tailor-hud.matched .jh-vui-tailor-fill{background:linear-gradient(90deg,#16a34a,#22c55e);box-shadow:0 0 14px rgba(34,197,94,0.6);}'\n          + '#'+ID+' .jh-vui-tailor-hud.matched .jh-vui-tailor-dot{background:#22c55e;box-shadow:0 0 11px rgba(34,197,94,0.85);animation:none;}'\n          + '#'+ID+' .jh-vui-tailor-hud.matched .jh-vui-tailor-label{color:#22c55e;}'\n          + '@media (min-width:1025px){#'+ID+' .jh-vui-title-overlay,#'+ID+' .jh-vui-status-overlay{display:none !important;}}'\n          + '@media (max-width:1024px){#'+ID+' .jh-vui-tailor-hud{display:none !important;}}';\n        (document.head||document.documentElement).appendChild(st);\n    }\n\n    \/* 2. Build the HUD card inside the pinned wrapper *\/\n    if (!sticky.querySelector('.jh-vui-tailor-hud')) {\n        var card = document.createElement('div');\n        card.className = 'jh-vui-tailor-hud';\n        card.setAttribute('aria-hidden','true');\n        card.innerHTML =\n            '<div class=\"jh-vui-tailor-id\">One-Click Resume Tailoring<\/div>'\n          + '<div class=\"jh-vui-tailor-status\"><span class=\"jh-vui-tailor-dot\"><\/span><span class=\"jh-vui-tailor-label\">Scroll to run<\/span><\/div>'\n          + '<div class=\"jh-vui-tailor-meter\"><span class=\"jh-vui-tailor-fill\"><\/span><\/div>';\n        sticky.appendChild(card);\n    }\n    var hud   = sticky.querySelector('.jh-vui-tailor-hud');\n    var fill  = hud.querySelector('.jh-vui-tailor-fill');\n    var label = hud.querySelector('.jh-vui-tailor-label');\n    if (!hud || !fill || !label) return;\n\n    \/* Visibility, position + materialize are driven per-frame in update()\n       (opacity\/filter transition each appearance). No persistent .in class. *\/\n\n    \/* 3. Scroll-POSITION driven, reversible (Emil: interruptible) *\/\n    var DOCK = 0.72;   \/* progress where the resume has docked \/ tailoring completes *\/\n    \/* Cue two-state reveal (2026-05-26 v2): NO travel. The cue shows at the TOP\n       (\"Scroll to run\", blue) until the convergence fires, fades out during the\n       active animation, then fades back in at the BOTTOM dock (\"Tailored \u2713\",\n       green) at\/near the resume's docked frame. The top->bottom reposition is a\n       snap that happens while opacity:0 (invisible), so there is no slide.\n       Visibility + position owned per-frame below. Constants tuned visually. *\/\n    var CUE_TOP_PX     = 24;    \/* MUST match style.css .jh-vui-tailor-hud top: *\/\n    var CUE_BOTTOM_PX  = 130;   \/* gap from frame bottom at the docked end *\/\n    var CUE_A_HIDE     = 0.22;  \/* top cue fades out here (animation \"fires\") *\/\n    var CUE_REPOS      = 0.44;  \/* snap top->bottom here (mid hidden zone) *\/\n    var CUE_C_SHOW     = 0.66;  \/* bottom cue fades in here (near dock) *\/\n    var CUE_C_HIDE     = 0.93;  \/* bottom cue fades out just before unpin *\/\n    var lastLabel = '';\n    var ticking = false;\n    function clamp(v){ return v < 0 ? 0 : (v > 1 ? 1 : v); }\n    function update(){\n        ticking = false;\n        if (window.innerWidth <= 1024) return;   \/* desktop only \u2014 mobile keeps its static reveal *\/\n        var rect  = sc.getBoundingClientRect();\n        var total = rect.height - window.innerHeight;\n        var p     = total > 0 ? (-rect.top) \/ total : 0;\n\n        \/* \u2500\u2500 Two-state phase model (reversible; opacity\/filter transition the fades) \u2500\u2500\n           A: TOP, visible, \"Scroll to run\"  (p < CUE_A_HIDE)\n           B: hidden during convergence      (CUE_A_HIDE .. CUE_C_SHOW)\n           C: BOTTOM, visible, \"Tailored \u2713\"  (CUE_C_SHOW .. CUE_C_HIDE) *\/\n        var showA    = p < CUE_A_HIDE;                       \/* top \"ready\" reveal *\/\n        var showC    = p >= CUE_C_SHOW && p < CUE_C_HIDE;    \/* bottom \"done\" reveal *\/\n        var atBottom = p >= CUE_REPOS;                       \/* repositioned (while hidden) *\/\n\n        \/* meter: ramps while visible at top; pinned full once at the bottom dock *\/\n        fill.style.transform = 'scaleX(' + (showC ? 1 : clamp(p \/ DOCK)) + ')';\n\n        \/* position snaps top<->bottom while invisible (transform has no transition) *\/\n        var maxY = sticky.clientHeight - CUE_BOTTOM_PX - hud.offsetHeight - CUE_TOP_PX;\n        if (maxY < 0) maxY = 0;\n        hud.style.transform = 'translateX(-50%) translateY(' + (atBottom ? maxY : 0) + 'px)';\n\n        \/* visible only at the two endpoints; fade + de-blur materialize each time *\/\n        var visible = showA || showC;\n        hud.style.opacity = visible ? '1' : '0';\n        hud.style.filter  = visible ? 'blur(0)' : 'blur(4px)';\n\n        \/* green \"done\" state at the bottom dock; blue \"ready\" at the top. Both the\n           class swap and the label swap happen at CUE_REPOS while hidden, so each\n           endpoint is already in its final state when it fades in. *\/\n        if (atBottom) hud.classList.add('matched'); else hud.classList.remove('matched');\n        var txt = atBottom ? 'Tailored \u2713' : 'Scroll to run';\n        if (txt !== lastLabel) { label.textContent = txt; lastLabel = txt; }\n    }\n    function onScroll(){ if (!ticking) { ticking = true; requestAnimationFrame(update); } }\n    window.addEventListener('scroll', onScroll, { passive: true });\n    window.addEventListener('resize', onScroll, { passive: true });\n    update();\n})();\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-756f288 elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"756f288\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-185baff exad-sticky-section-no\" data-id=\"185baff\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-96fdbd2 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"96fdbd2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n<section id=\"jh_it_irDSR4\" class=\"jh-it-section\" data-jh-component=\"IntelTriptych\">\r\n\r\n    <header class=\"jh-it-section-header\" id=\"three-lenses\" style=\"scroll-margin-top:96px;\">\r\n        <span class=\"jh-it-eyebrow\">&#9654; WHAT THE AI SEES<\/span>\r\n        <h2 class=\"jh-it-headline\">Three lenses, <span class=\"jh-it-headline-accent\">one decision.<\/span><\/h2>\r\n        <p class=\"jh-it-sub\">Every role has three questions you should answer before you write a word. Just Hired answers all three.<\/p>\r\n        <a class=\"jh-it-section-cta\" href=\"https:\/\/justhired.ai\/clonev2\/features\/\">See all features<\/a>\r\n    <\/header>\r\n\r\n    <div class=\"jh-it-grid\">\r\n\r\n        <!-- Top-left: INSIDER INTEL -->\r\n        <a class=\"jh-it-tile jh-it-tile--insider\" href=\"https:\/\/justhired.ai\/clonev2\/features\/#insider-intel\" data-tile=\"insider\">\r\n          <div class=\"jh-it-tile-head\">\r\n            <span class=\"jh-it-tile-eyebrow\">01 &middot; INSIDER BRIEF<\/span>\r\n            <h3 class=\"jh-it-tile-headline\">Know the real job <span class=\"jh-it-headline-accent\">before you apply.<\/span><\/h3>\r\n          <\/div>\r\n          <div class=\"jh-it-tile-row\">\r\n            <div class=\"jh-it-tile-stage\">\r\n\r\n                        <!-- Demo narrator: static caption above the animation so a viewer\r\n                             grasps the purpose in <3s (the scan+brief swap in the box below).\r\n                             Styling\/layout JS-injected (new selectors) to dodge tree-shaking. -->\r\n                        <div class=\"jh-it-stage-cap\" aria-hidden=\"true\">\r\n                            <span class=\"jh-it-stage-cap-line\">Reading the job post for what it won&rsquo;t tell you<\/span>\r\n                            <span class=\"jh-it-stage-cap-facts\">real title &middot; why they&rsquo;re hiring &middot; key metrics &middot; the real work &middot; culture<\/span>\r\n                        <\/div>\r\n\r\n                                                <div id=\"jhe4_UH7Moi\" class=\"jh-ext-shell-wrap\">\r\n<div class=\"shell\">\r\n\r\n  <!-- \u2550\u2550\u2550\u2550 LEFT: RAW JD \u2550\u2550\u2550\u2550 -->\r\n  <div class=\"jd-panel\">\r\n\r\n    <!-- Fake browser chrome -->\r\n    <div class=\"jd-chrome\">\r\n      <div class=\"jd-chrome-dots\">\r\n        <div class=\"jd-chrome-dot\"><\/div>\r\n        <div class=\"jd-chrome-dot\"><\/div>\r\n        <div class=\"jd-chrome-dot\"><\/div>\r\n      <\/div>\r\n      <div class=\"jd-chrome-bar\">\r\n        <div class=\"jd-chrome-bar-dot\"><\/div>\r\n        indeed.com\/viewjob?jk=8f2a4b9c\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Job board header -->\r\n    <div class=\"jb-board-hdr\">\r\n      <div class=\"jb-company\">San Diego State Athletics \u00b7 San Diego, CA<\/div>\r\n      <div class=\"jb-job-title\">Director, Premium Sales<\/div>\r\n      <div class=\"jb-meta\">\r\n        <div class=\"jb-meta-item\"><span class=\"jb-meta-icon\">\ud83d\udcbc<\/span>Full-time<\/div>\r\n        <div class=\"jb-meta-item\"><span class=\"jb-meta-icon\">\ud83d\udccd<\/span>On-site<\/div>\r\n        <div class=\"jb-meta-item\"><span class=\"jb-meta-icon\">\ud83d\udcb0<\/span>$90k\u2013$115k\/yr<\/div>\r\n      <\/div>\r\n      <div class=\"jb-apply\">Apply Now \u2197<\/div>\r\n    <\/div>\r\n\r\n    <!-- JD body with scan beam -->\r\n    <div class=\"jd-body\" id=\"jd-body\">\r\n      <div id=\"scan-beam\"><\/div>\r\n\r\n      <div class=\"jd-sec\" id=\"jsec-about\">\r\n        <div class=\"jd-sec-title\">About the Role<\/div>\r\n        <div class=\"jd-sec-body\">\r\n          San Diego State Athletics is seeking a dynamic and results-driven\r\n          <span class=\"kh\" id=\"kh-title\">Director of Premium Sales<\/span>\r\n          to lead our premium revenue division. The ideal candidate will\r\n          <span class=\"kh\" id=\"kh-why\">drive premium revenue growth across various sports<\/span>\r\n          and oversee a team of sales representatives, contributing to the continued success of SDSU Athletics.\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"jd-sec\" id=\"jsec-resp\">\r\n        <div class=\"jd-sec-title\">Responsibilities<\/div>\r\n        <div class=\"jd-sec-body\">\r\n          <span class=\"kh\" id=\"kh-r1\">Recruit, hire, train, and mentor<\/span> team members on strategy, call scripts, and closing of sales.\r\n          Develop and implement an <span class=\"kh\" id=\"kh-r2\">annual premium revenue plan<\/span>.\r\n          <span class=\"kh\" id=\"kh-r3\">Increase premium revenue by 15% year-over-year<\/span> and achieve a <span class=\"kh\" id=\"kh-r4\">90% renewal rate<\/span> for premium seating products.\r\n          Grow <span class=\"kh\" id=\"kh-r5\">corporate business by 10% annually<\/span> through targeted outreach and relationship management.\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"jd-sec\" id=\"jsec-req\">\r\n        <div class=\"jd-sec-title\">Requirements<\/div>\r\n        <div class=\"jd-sec-body\">\r\n          Bachelor's degree required; 5+ years of progressive sales experience with at least 2 years in a management role.\r\n          Proven track record of <span class=\"kh\" id=\"kh-culture\">results-driven, team-first<\/span> leadership.\r\n          Experience in premium sales, sponsorship, or <span class=\"kh\" id=\"kh-culture2\">collaborative, performance-oriented<\/span> environments preferred.\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- P2-8c-fix: reveal CTA moved here, onto the VISIBLE scan layer. It was\r\n         inside .brief-status within the opacity:0 .brief-panel, so the\r\n         scan-complete gate CTA was invisible + unclickable on every device.\r\n         The #reveal-btn id and the JS binding are unchanged; gate behavior is\r\n         identical (click reveals; 2500ms auto-fallback; reduced-motion still\r\n         skips straight to the static report). -->\r\n    <button type=\"button\" class=\"brief-reveal-btn\" id=\"reveal-btn\">Reveal report &rarr;<\/button>\r\n  <\/div><!-- \/jd-panel -->\r\n\r\n\r\n  <!-- \u2550\u2550\u2550\u2550 RIGHT: BRIEF PANEL \u2550\u2550\u2550\u2550 -->\r\n  <div class=\"brief-panel\">\r\n\r\n    <div class=\"brief-hdr\">\r\n      <div>\r\n        <div class=\"brief-eyebrow\">Insider Intelligence<\/div>\r\n        <div class=\"brief-title\">The Insider Brief<\/div>\r\n        <div class=\"brief-sub\">Decoding the reality behind the job description<\/div>\r\n      <\/div>\r\n      <div class=\"brief-shield\">\ud83d\udee1<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"brief-status\">\r\n      <div class=\"brief-status-dot\" id=\"status-dot\"><\/div>\r\n      <span class=\"brief-status-txt\" id=\"status-txt\">Waiting for scan<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"brief-cards\" id=\"brief-cards\">\r\n\r\n      <!-- Card 1: Real Title -->\r\n      <div class=\"icard type-title\" id=\"ic-title\">\r\n        <div class=\"ic-label\">The \"Real\" Title<\/div>\r\n        <div class=\"ic-content\">\r\n          <strong>Director, Premium Sales<\/strong> \u2014 title matches duties.\r\n          This is a genuine revenue leadership role, not a rebadged individual contributor position.\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Card 2: Why They're Hiring -->\r\n      <div class=\"icard type-why\" id=\"ic-why\">\r\n        <div class=\"ic-label\">Why They're Hiring<\/div>\r\n        <div class=\"ic-content\">\r\n          To <strong>drive premium revenue growth<\/strong> across sports verticals and manage a sales team.\r\n          Growth hire, not a backfill \u2014 they're scaling the premium division.\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Card 3: Success Metrics -->\r\n      <div class=\"icard type-metrics\" id=\"ic-metrics\">\r\n        <div class=\"ic-label\">The Role's Success Metrics<\/div>\r\n        <div class=\"ic-content\">\r\n          Increase premium revenue <strong>15% year-over-year<\/strong><br>\r\n          Achieve <strong>90% renewal rate<\/strong> on premium seating<br>\r\n          Grow corporate business <strong>10% annually<\/strong>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Card 4: Responsibilities Decoder -->\r\n      <div class=\"icard type-resp\" id=\"ic-resp\">\r\n        <div class=\"ic-label\">Responsibilities Decoder<\/div>\r\n        <div class=\"ic-resp-row\">\r\n          <span class=\"ic-resp-raw\">Recruit, hire, train, mentor team members<\/span>\r\n          <span class=\"ic-resp-arrow\">\u2192<\/span>\r\n          <span class=\"ic-resp-decoded\">Build and run a sales team from scratch<\/span>\r\n        <\/div>\r\n        <div class=\"ic-resp-row\">\r\n          <span class=\"ic-resp-raw\">Implement annual premium revenue plan<\/span>\r\n          <span class=\"ic-resp-arrow\">\u2192<\/span>\r\n          <span class=\"ic-resp-decoded\">Own the number, no handholding<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Card 5: Culture Signal -->\r\n      <div class=\"icard type-culture\" id=\"ic-culture\">\r\n        <div class=\"ic-label\">Culture Signal<\/div>\r\n        <div class=\"ic-culture-row\">\r\n          <span class=\"ic-culture-icon\">\ud83d\udee1<\/span>\r\n          <span>\r\n            <strong>\"Results-driven, team-first\"<\/strong> signals a\r\n            performance-oriented culture with collaborative expectations \u2014\r\n            you'll be held to hard numbers but supported by the team.\r\n          <\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div><!-- \/brief-panel -->\r\n\r\n<\/div><!-- \/shell -->\r\n                        <\/div>\r\n                        <script>\r\n                        (function(){\r\n'use strict';\r\n\r\nconst g = id => document.getElementById('jhe4_UH7Moi').querySelector('#' + id);\r\nconst sleep = ms => new Promise(r => setTimeout(r, ms));\r\nconst isMobile = () => window.innerWidth <= 720;\r\n\r\nconst _w4 = document.getElementById('jhe4_UH7Moi');\r\nconst scanBeam  = _w4.querySelector('#scan-beam');\r\nconst statusDot = g('status-dot');\r\nconst statusTxt = g('status-txt');\r\nconst jdBody    = _w4.querySelector('#jd-body');\r\nconst jdPanel   = document.getElementById('jhe4_UH7Moi').querySelector('.jd-panel');\r\nconst briefPanel= document.getElementById('jhe4_UH7Moi').querySelector('.brief-panel');\r\n\r\nconst LOOP_MS = 14000;\r\nlet loopTimer = null;\r\n\r\n\/* Phase A: bound the demo lifecycle.\r\n   - prefersReduce: honor OS-level reduced-motion preference; don't animate at all.\r\n   - MAX_CYCLES \/ cycleCount: cap the demo at 2 full loops, then settle in\r\n     terminal state so the section doesn't loop forever while in viewport.\r\n   cycleCount is reset to 0 in ext4Start() each time the tile re-enters focal,\r\n   so a scroll-back replays a fresh 2 cycles. *\/\r\nconst MAX_CYCLES = 2;\r\nlet cycleCount = 0;\r\nconst prefersReduce = () => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n\/* \u2500\u2500 Helpers \u2500\u2500 *\/\r\nfunction litKw(id, cls){ const el=g(id); if(el) el.classList.add(cls); }\r\nfunction litSec(id){ const el=g(id); if(el){ el.classList.add('scanning'); setTimeout(()=>el.classList.remove('scanning'),700); } }\r\nfunction showCard(id){ const el=g(id); if(el) el.classList.add('visible'); }\r\nfunction setStatus(txt, active){\r\n  statusTxt.textContent=txt;\r\n  statusTxt.classList.toggle('active',active);\r\n  statusDot.classList.toggle('active',active);\r\n}\r\n\r\nfunction startBeam(){\r\n  const bodyH = jdBody.offsetHeight;\r\n  scanBeam.style.transition='none';\r\n  scanBeam.style.opacity='1';\r\n  scanBeam.style.transform='translateY(0)';\r\n  requestAnimationFrame(()=>{\r\n    requestAnimationFrame(()=>{\r\n      scanBeam.style.transition=`transform 3100ms linear, opacity 300ms ease`;\r\n      scanBeam.style.transform=`translateY(${bodyH}px)`;\r\n      setTimeout(()=>{ scanBeam.style.opacity='0'; },2900);\r\n    });\r\n  });\r\n}\r\n\r\n\/* \u2500\u2500 Panel swap (mobile) \u2500\u2500 *\/\r\nfunction swapToInsights(){\r\n  jdPanel.classList.add('exit');\r\n  briefPanel.classList.add('enter');\r\n}\r\n\r\nfunction swapToJD(){\r\n  jdPanel.classList.remove('exit');\r\n  briefPanel.classList.remove('enter');\r\n}\r\n\r\n\/* \u2500\u2500 Reset \u2500\u2500 *\/\r\nfunction resetAll(){\r\n  clearTimeout(loopTimer);\r\n\r\n  scanBeam.style.transition='none';\r\n  scanBeam.style.opacity='0';\r\n  scanBeam.style.transform='translateY(0)';\r\n\r\n  document.querySelectorAll('.kh').forEach(el=>el.className='kh');\r\n\r\n  ['ic-title','ic-why','ic-metrics','ic-resp','ic-culture'].forEach(id=>{\r\n    const el=g(id); if(el) el.classList.remove('visible');\r\n  });\r\n\r\n  setStatus('Waiting for scan', false);\r\n  statusDot.style.background='';\r\n  statusDot.style.boxShadow='';\r\n\r\n  \/* Reset panel positions on mobile *\/\r\n  swapToJD();\r\n}\r\n\r\n\/* \u2500\u2500 Main loop \u2500\u2500 *\/\r\nasync function runLoop(){\r\n  if (prefersReduce()) {\r\n    \/* P2-8c a11y: no scan\/loop under reduced-motion \u2014 show the report\r\n       statically so the payoff is never trapped. *\/\r\n    resetAll();\r\n    swapToInsights();\r\n    ['ic-title','ic-why','ic-resp','ic-metrics','ic-culture'].forEach(id=> showCard(id));\r\n    return;\r\n  }\r\n  cycleCount++;\r\n  resetAll();\r\n  await sleep(600);\r\n\r\n  setStatus('Scanning job description...', true);\r\n  startBeam();\r\n\r\n  \/* P2-8c: scan phase is card-free for BOTH breakpoints (JD scan only \u2014\r\n     beam + keyword highlights). Cards reveal after the gate. *\/\r\n  await sleep(450);\r\n  litSec('jsec-about');\r\n  litKw('kh-title','lit-blue');\r\n  await sleep(200);\r\n\r\n  await sleep(350);\r\n  litKw('kh-why','lit-indigo');\r\n  await sleep(180);\r\n\r\n  await sleep(450);\r\n  litSec('jsec-resp');\r\n  litKw('kh-r1','lit-amber');\r\n  litKw('kh-r2','lit-amber');\r\n  await sleep(160);\r\n\r\n  await sleep(360);\r\n  litKw('kh-r3','lit-green');\r\n  litKw('kh-r4','lit-green');\r\n  litKw('kh-r5','lit-green');\r\n  await sleep(180);\r\n\r\n  await sleep(500);\r\n  litSec('jsec-req');\r\n  litKw('kh-culture','lit-indigo');\r\n  litKw('kh-culture2','lit-indigo');\r\n  await sleep(200);\r\n\r\n  \/* P2-8c: scan complete \u2014 gate the report behind the Reveal CTA.\r\n     Unified for desktop + mobile (mobile scene = frozen \u2264720 .exit\/.enter;\r\n     desktop scene = style.css min-width:721 overlay). Click reveals; a\r\n     2500ms auto-fallback ensures the payoff is never lost if nobody clicks. *\/\r\n  await sleep(300);\r\n  setStatus('Scan complete \u2014 reveal the brief', false);\r\n  statusDot.style.background='#22c55e';\r\n  statusDot.style.boxShadow='0 0 6px rgba(34,197,94,0.6)';\r\n\r\n  const revealBtn = g('reveal-btn');\r\n  let revealed = false;\r\n  function revealReport(){\r\n    if(revealed) return;\r\n    revealed = true;\r\n    if(revealBtn) revealBtn.classList.remove('show');\r\n    setStatus('5 of 5 insights decoded', false);\r\n    swapToInsights();\r\n    const CARDS = ['ic-title','ic-why','ic-resp','ic-metrics','ic-culture'];\r\n    CARDS.forEach((id, i) => setTimeout(()=> showCard(id), 260 + i * 320));\r\n    \/* Hold then reset\/loop *\/\r\n    loopTimer = setTimeout(()=>{\r\n      if (cycleCount >= MAX_CYCLES) return; \/* settle in terminal state *\/\r\n      resetAll();\r\n      setTimeout(runLoop, 500);\r\n    }, 7500);\r\n  }\r\n  if(revealBtn){\r\n    revealBtn.classList.add('show');\r\n    \/* The tile is an <a href> wrapper \u2014 must stop the click\/Enter\/Space from\r\n       following the anchor (P2-8c bug fix: it navigated without this). *\/\r\n    revealBtn.onclick = function(e){ e.preventDefault(); e.stopPropagation(); revealReport(); };\r\n  }\r\n  loopTimer = setTimeout(revealReport, 1400);\r\n}\r\n\r\n\/* \u2500\u2500 Trigger: MutationObserver on aria-hidden + class (JHCarousel.updateNav) \u2500\u2500 *\/\r\nvar ext4Slide = document.getElementById('jhe4_UH7Moi').closest('.jh-it-tile');\r\nvar ext4Running = false;\r\n\r\nfunction ext4Start() {\r\n    if (ext4Running) return;\r\n    ext4Running = true;\r\n    cycleCount = 0; \/* Phase A: reset cycle cap so a scroll-back replays *\/\r\n    resetAll();\r\n    setTimeout(runLoop, 400);\r\n}\r\nfunction ext4Stop() {\r\n    if (!ext4Running) return;\r\n    ext4Running = false;\r\n    resetAll();\r\n}\r\nfunction ext4IsActive() {\r\n    return ext4Slide && ext4Slide.classList.contains('is-focal');\r\n}\r\n\r\nif (ext4Slide) {\r\n    new MutationObserver(function() {\r\n        if (ext4IsActive()) { ext4Start(); } else { ext4Stop(); }\r\n    }).observe(ext4Slide, { attributes: true, attributeFilter: ['class'] });\r\n\r\n    setInterval(function() {\r\n        if (ext4IsActive() && !ext4Running) { ext4Start(); }\r\n        else if (!ext4IsActive() && ext4Running) { ext4Stop(); }\r\n    }, 350);\r\n\r\n    if (ext4IsActive()) ext4Start();\r\n}\r\n                        })();\r\n                        <\/script>\r\n\r\n            <\/div><!-- \/.jh-it-tile-stage -->\r\n            <div class=\"jh-it-tile-copy\">\r\n                <p class=\"jh-it-tile-desc\">Job descriptions are written to attract &mdash; not to inform. We pull the five facts that actually decide whether you should apply: the real title, why they&rsquo;re hiring, the metrics you&rsquo;ll be measured on, the work behind the buzzwords, and the culture you&rsquo;re walking into.<\/p>\r\n                <ul class=\"jh-it-tile-wins\">\r\n                    <li>Five hiring signals decoded from any listing<\/li>\r\n                    <li>Spot growth roles vs. quiet backfills in seconds<\/li>\r\n                    <li>Walk in already speaking their language<\/li>\r\n                <\/ul>\r\n                <span class=\"jh-it-tile-cta\">See what the AI sees &rarr;<\/span>\r\n            <\/div>\r\n          <\/div><!-- \/.jh-it-tile-row -->\r\n        <\/a>\r\n\r\n        <!-- Bottom-left: RECRUITER'S VIEW -->\r\n        <a class=\"jh-it-tile jh-it-tile--recruiter\" href=\"https:\/\/justhired.ai\/clonev2\/features\/#recruiters-view\" data-tile=\"recruiter\">\r\n          <div class=\"jh-it-tile-head\">\r\n            <span class=\"jh-it-tile-eyebrow\">02 &middot; RECRUITER&rsquo;S VIEW<\/span>\r\n            <h3 class=\"jh-it-tile-headline\">Spot the gaps <span class=\"jh-it-headline-accent\">before the recruiter does.<\/span><\/h3>\r\n          <\/div>\r\n          <div class=\"jh-it-tile-row\">\r\n            <div class=\"jh-it-tile-stage\">\r\n\r\n                        <!-- Demo narrator: static caption above the gap-analysis animation\r\n                             (desktop\/tablet only; hidden on mobile via injected CSS). -->\r\n                        <div class=\"jh-it-stage-cap\" aria-hidden=\"true\">\r\n                            <span class=\"jh-it-stage-cap-line\">Scoring your resume against every requirement<\/span>\r\n                            <span class=\"jh-it-stage-cap-facts\">must-haves &middot; nice-to-haves &middot; matches &middot; gaps<\/span>\r\n                        <\/div>\r\n\r\n                                                <div id=\"jhe3_ZMPTdU\" class=\"jh-ext-shell-wrap\">\r\n<div class=\"shell\" id=\"shell\">\r\n\r\n  <!-- \u2550\u2550 JOB BAR \u2550\u2550 -->\r\n  <div class=\"job-bar\">\r\n    <span class=\"jb-title\">Inside Sales Associate I<\/span>\r\n    <div class=\"jb-sep\"><\/div>\r\n    <span class=\"jb-co\">WWS Acquisitions LLC<\/span>\r\n    <div class=\"jb-actions\">\r\n      <div class=\"jb-btn jb-btn-active\">\r\n        <svg width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" viewBox=\"0 0 24 24\"><path d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\/><\/svg>\r\n        Fit Analysis\r\n      <\/div>\r\n      <div class=\"jb-btn jb-btn-primary\">\r\n        \u2726 Tailor My Resume\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"main\">\r\n\r\n    <!-- \u2550\u2550 LEFT: GAP LIST \u2550\u2550 -->\r\n    <div class=\"gap-panel\" id=\"gap-panel\">\r\n      <div class=\"gap-panel-hdr\">\r\n        <div class=\"gph-eyebrow\">Recruiters View<\/div>\r\n        <div class=\"gph-title\">Match &amp; Gap Analysis<\/div>\r\n        <div class=\"gph-sub\">Your matches and missing requirements<\/div>\r\n      <\/div>\r\n      <div class=\"gap-divider\"><\/div>\r\n      <div class=\"gap-list\">\r\n\r\n        <div class=\"gap-section-hdr\">Must-Haves<\/div>\r\n\r\n        <div class=\"gap-row\" id=\"gr-1\">\r\n          <div class=\"gap-plus\" id=\"gp-1\">+<\/div>\r\n          <div class=\"gap-sq amber\" id=\"gs-1\"><\/div>\r\n          <div class=\"gap-txt\">Previous experience in inside sales, customer service, or a related role<\/div>\r\n          <div class=\"gap-matched-badge\">Added<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gap-row\" id=\"gr-2\">\r\n          <div class=\"gap-plus\" id=\"gp-2\">+<\/div>\r\n          <div class=\"gap-sq amber\" id=\"gs-2\"><\/div>\r\n          <div class=\"gap-txt\">Proven ability to meet or exceed sales quotas consistently<\/div>\r\n          <div class=\"gap-matched-badge\">Added<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gap-row\" id=\"gr-3\">\r\n          <div class=\"gap-plus\" id=\"gp-3\">+<\/div>\r\n          <div class=\"gap-sq red\" id=\"gs-3\"><\/div>\r\n          <div class=\"gap-txt\">Experience in window and door or building materials industry<\/div>\r\n          <div class=\"gap-matched-badge\">Added<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gap-section-hdr\" style=\"margin-top:8px;\">Nice-to-Haves<\/div>\r\n\r\n        <div class=\"gap-row\" id=\"gr-4\">\r\n          <div class=\"gap-plus\" id=\"gp-4\">+<\/div>\r\n          <div class=\"gap-sq amber\" id=\"gs-4\"><\/div>\r\n          <div class=\"gap-txt\">Familiarity with CRM tools for tracking leads and customer interactions<\/div>\r\n          <div class=\"gap-matched-badge\">Added<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"gap-row\" id=\"gr-5\">\r\n          <div class=\"gap-plus\" id=\"gp-5\">+<\/div>\r\n          <div class=\"gap-sq amber\" id=\"gs-5\"><\/div>\r\n          <div class=\"gap-txt\">Bachelor's degree in Business, Marketing, or related field preferred<\/div>\r\n          <div class=\"gap-matched-badge\">Added<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div><!-- \/gap-panel -->\r\n\r\n    <!-- \u2550\u2550 RIGHT: DETAIL PANEL \u2550\u2550 -->\r\n    <div class=\"detail-panel\" id=\"detail-panel\">\r\n      <div class=\"dp-handle\"><\/div>\r\n\r\n      <div class=\"dp-hdr\">\r\n        <div class=\"dp-eyebrow\">Your call, not the AI&rsquo;s<\/div>\r\n        <!-- Static narrator (replaces the fast-swapping requirement text, which was\r\n             unreadable + wasted real estate). Imperative\/2nd-person on purpose: the\r\n             user picks the gap AND the job, so the copy reads user-driven rather than\r\n             \"the system does it for you\". Reuses the existing .dp-req-txt styling. -->\r\n        <div class=\"dp-req-txt\">You choose which real job each requirement came from &mdash; nothing invented.<\/div>\r\n        <!-- Hidden JS target: the animation still writes the current requirement to\r\n             #dp-req-txt every beat; keeping the id on an off-screen span means no JS\r\n             change is needed and the visible narrator above stays static. -->\r\n        <span id=\"dp-req-txt\" style=\"display:none\"><\/span>\r\n      <\/div>\r\n\r\n      <div class=\"dp-where\" id=\"dp-where\">\r\n        <div class=\"dp-where-lbl\">Your past roles<\/div>\r\n\r\n        <div class=\"job-card\" id=\"jc-1\">\r\n          <div class=\"jc-radio\"><div class=\"jc-radio-inner\"><\/div><\/div>\r\n          <div class=\"jc-info\">\r\n            <div class=\"jc-title\">Senior Sales Associate<\/div>\r\n            <div class=\"jc-co\">TechFlow Solutions<\/div>\r\n          <\/div>\r\n          <div class=\"jc-dates\">Jan 2022 \u2013 Present<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"job-card\" id=\"jc-2\">\r\n          <div class=\"jc-radio\"><div class=\"jc-radio-inner\"><\/div><\/div>\r\n          <div class=\"jc-info\">\r\n            <div class=\"jc-title\">Sales Representative<\/div>\r\n            <div class=\"jc-co\">Nexus Corp<\/div>\r\n          <\/div>\r\n          <div class=\"jc-dates\">Mar 2019 \u2013 Dec 2021<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"job-card\" id=\"jc-3\">\r\n          <div class=\"jc-radio\"><div class=\"jc-radio-inner\"><\/div><\/div>\r\n          <div class=\"jc-info\">\r\n            <div class=\"jc-title\">Account Manager<\/div>\r\n            <div class=\"jc-co\">Vertex Dynamics<\/div>\r\n          <\/div>\r\n          <div class=\"jc-dates\">Jun 2017 \u2013 Feb 2019<\/div>\r\n        <\/div>\r\n\r\n        <!-- Desktop in-panel tailoring loader (sequential path only; replaces the job\r\n             cards after Save). Hidden by default; layout\/styles injected at runtime so\r\n             the server-side CSS optimizer can't tree-shake the new selectors. -->\r\n        <div class=\"dp-tailoring\" id=\"dp-tailoring\" style=\"display:none;\">\r\n          <div class=\"dp-tailoring-txt\">Tailoring your resume\u2026<\/div>\r\n          <div class=\"dp-tailoring-bar\"><div class=\"dp-tailoring-fill\" id=\"dp-tailoring-fill\"><\/div><\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"dp-footer\">\r\n        <button class=\"dp-cancel\">Cancel<\/button>\r\n        <button class=\"dp-save\" id=\"dp-save\">Save to Resume<\/button>\r\n      <\/div>\r\n    <\/div><!-- \/detail-panel -->\r\n\r\n  <\/div><!-- \/main -->\r\n\r\n  <!-- Tailoring shimmer overlay \u2014 shell level so it's visible after panel closes -->\r\n  <div class=\"tailoring-overlay\" id=\"tailoring-overlay\">\r\n    <div class=\"tailoring-txt\">Tailoring your resume...<\/div>\r\n    <div class=\"shimmer-bar\"><div class=\"shimmer-fill\" id=\"shimmer-fill\"><\/div><\/div>\r\n  <\/div>\r\n\r\n  <!-- Mobile backdrop -->\r\n  <div class=\"mob-backdrop\" id=\"mob-backdrop\"><\/div>\r\n\r\n\r\n\r\n  <!-- Sim cursor -->\r\n  <div id=\"sim-cursor\">\r\n    <svg width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\r\n      <path d=\"M3.5 2L3.5 18.5L7.8 14.2L11 22L13.4 21L10.2 13.2L16.5 13.2Z\"\r\n        fill=\"white\" stroke=\"rgba(0,0,0,0.28)\" stroke-width=\"1.4\"\r\n        stroke-linejoin=\"round\" stroke-linecap=\"round\"\/>\r\n    <\/svg>\r\n    <div id=\"sim-ripple\"><\/div>\r\n  <\/div>\r\n\r\n<\/div><!-- \/shell -->\r\n                        <\/div>\r\n                        <script>\r\n                        (function(){\r\n'use strict';\r\n\r\nconst g  = id => document.getElementById('jhe3_ZMPTdU').querySelector('#' + id);\r\nconst isMobile = () => window.innerWidth <= 720;\r\n\r\n\/* DOM *\/\r\nconst shell         = document.getElementById('jhe3_ZMPTdU').querySelector('.shell');\r\nconst gapPanel      = g('gap-panel');\r\nconst detailPanel   = g('detail-panel');\r\nconst dpReqTxt      = g('dp-req-txt');\r\nconst tailOverlay   = g('tailoring-overlay');\r\nconst shimFill      = g('shimmer-fill');\r\nconst dpSave        = g('dp-save');\r\nconst toast         = g('toast');\r\nconst mobBackdrop   = g('mob-backdrop');\r\nconst simCursor     = g('sim-cursor');\r\nconst simRipple     = g('sim-ripple');\r\nconst dpWhere       = g('dp-where');\r\nconst dpTail        = g('dp-tailoring');\r\nconst dpTailFill    = g('dp-tailoring-fill');\r\nconst dpTailTxt     = dpTail ? dpTail.querySelector('.dp-tailoring-txt') : null;\r\n\r\n\/* Sequence: bullets 1, 3, 4 \u2014 each selects a different job *\/\r\nconst SEQUENCE = [\r\n  { rowId:'gr-1', plusId:'gp-1', sqId:'gs-1', jobId:'jc-1',\r\n    req:'Previous experience in inside sales, customer service, or a related role' },\r\n  { rowId:'gr-3', plusId:'gp-3', sqId:'gs-3', jobId:'jc-2',\r\n    req:'Experience in window and door or building materials industry' },\r\n  { rowId:'gr-4', plusId:'gp-4', sqId:'gs-4', jobId:'jc-3',\r\n    req:'Familiarity with CRM tools for tracking leads and customer interactions' },\r\n];\r\n\r\n\/* Desktop\/tablet sequential path: deliberately non-identity bullet->job mapping so the\r\n   pairings don't read as 1-1 \/ 2-2 \/ 3-3 (gr-1->jc-2, gr-3->jc-1, gr-4->jc-3). The cursor\r\n   path therefore zig-zags (down, up, down). Mobile (runBeatBatch) keeps SEQUENCE.jobId\r\n   unchanged -- it selects all three jobs anyway, so the order is visually irrelevant there. *\/\r\nconst DESK_JOB = ['jc-2','jc-1','jc-3'];\r\n\r\nconst LOOP_MS = 22000;\r\nlet loopTimer = null;\r\n\r\n\/* Phase A: bound the demo lifecycle.\r\n   - prefersReduce: honor OS-level reduced-motion preference; don't animate at all.\r\n   - MAX_CYCLES \/ cycleCount: cap the demo at 2 full loops, then settle.\r\n   cycleCount is reset in ext3Start() so a scroll-back replays a fresh 2 cycles. *\/\r\nconst MAX_CYCLES = 2;\r\nlet cycleCount = 0;\r\nconst prefersReduce = () => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n\/* \u2500\u2500 Inject the in-panel tailoring loader's CSS at runtime. New selectors inside an\r\n   inline <style> get tree-shaken by the server-side CSS optimizer, so we add them after\r\n   parse where the optimizer can't see them. The page's existing jhe3_shimbar keyframe\r\n   has a double-prefix typo (defined as @keyframes jhe3_jhe3_shimbar) and never runs, so\r\n   we define our own correctly-named keyframe here. \u2500\u2500 *\/\r\n(function injectDpTailCss(){\r\n  var sid = 'jhe3-dptail-css-jhe3_ZMPTdU';\r\n  if(document.getElementById(sid)) return;\r\n  var st = document.createElement('style');\r\n  st.id = sid;\r\n  st.textContent =\r\n    '#jhe3_ZMPTdU .dp-where{position:relative;}' +\r\n    '#jhe3_ZMPTdU #dp-tailoring{position:absolute;inset:0;background:#0d1117;flex-direction:column;align-items:center;justify-content:center;gap:14px;opacity:0;pointer-events:none;z-index:6;}' +\r\n    '#jhe3_ZMPTdU .dp-tailoring-txt{font-family:\\'Geist Mono\\',\\'JetBrains Mono\\',monospace;font-size:10px;font-weight:600;letter-spacing:0.18em;color:rgba(96,176,255,0.7);text-transform:uppercase;}' +\r\n    '#jhe3_ZMPTdU .dp-tailoring-bar{width:200px;height:3px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden;}' +\r\n    '#jhe3_ZMPTdU .dp-tailoring-fill{height:100%;width:0%;background:linear-gradient(90deg,#0554F2,#60B0FF,#0554F2);background-size:200% 100%;border-radius:2px;animation:jhe3_dptail_shim 1.2s ease-in-out infinite;}' +\r\n    '@keyframes jhe3_dptail_shim{0%{background-position:100% 0;}100%{background-position:-100% 0;}}';\r\n  (document.head || document.documentElement).appendChild(st);\r\n})();\r\n\r\n\/* \u2500\u2500 Cursor helpers \u2500\u2500 *\/\r\nfunction getPos(el){\r\n  const sr = shell.getBoundingClientRect();\r\n  const er = el.getBoundingClientRect();\r\n  return { x: er.left-sr.left+er.width\/2, y: er.top-sr.top+er.height\/2 };\r\n}\r\nfunction cursorPlace(el){ const p=getPos(el); simCursor.style.transition='none'; simCursor.style.left=p.x+'px'; simCursor.style.top=p.y+'px'; }\r\nfunction cursorShow(){ requestAnimationFrame(()=>{ simCursor.style.transition='opacity 0.28s ease'; simCursor.style.opacity='1'; }); }\r\nfunction cursorMove(el,ms){ const p=getPos(el); simCursor.style.transition=`opacity 0.28s ease,left ${ms}ms cubic-bezier(0.4,0,0.2,1),top ${ms}ms cubic-bezier(0.4,0,0.2,1)`; simCursor.style.left=p.x+'px'; simCursor.style.top=p.y+'px'; }\r\nfunction cursorClick(){ simCursor.classList.add('pressing'); simRipple.classList.remove('fire'); void simRipple.offsetWidth; simRipple.classList.add('fire'); setTimeout(()=>simCursor.classList.remove('pressing'),130); }\r\nfunction cursorHide(){ simCursor.style.transition='opacity 0.4s ease'; simCursor.style.opacity='0'; }\r\n\r\n\/* \u2500\u2500 Reset \u2500\u2500 *\/\r\nfunction resetAll(){\r\n  clearTimeout(loopTimer);\r\n  detailPanel.classList.remove('open');\r\n  gapPanel.classList.remove('shifted');\r\n  mobBackdrop.classList.remove('show');\r\n\r\n  ['gr-1','gr-2','gr-3','gr-4','gr-5'].forEach(id=>{\r\n    const r=g(id); if(r) r.classList.remove('highlighted','matched');\r\n  });\r\n  ['gp-1','gp-2','gp-3','gp-4','gp-5'].forEach(id=>{\r\n    const p=g(id); if(p) p.textContent='+';\r\n  });\r\n  ['gs-1','gs-3','gs-4'].forEach(id=>{\r\n    const s=g(id);\r\n    if(!s) return;\r\n    s.className = (id==='gs-3') ? 'gap-sq red' : 'gap-sq amber';\r\n  });\r\n  ['jc-1','jc-2','jc-3'].forEach(id=>{\r\n    const c=g(id);\r\n    if(!c) return;\r\n    c.classList.remove('selected');\r\n    c.style.transition=''; c.style.transform=''; c.style.opacity=''; c.style.filter='';\r\n  });\r\n\r\n  \/* Desktop in-panel loader + animated requirement text *\/\r\n  if(dpTail){\r\n    dpTail.style.display='none';\r\n    dpTail.style.transition=''; dpTail.style.opacity=''; dpTail.style.transform=''; dpTail.style.filter='';\r\n  }\r\n  if(dpTailTxt){ dpTailTxt.style.transition=''; dpTailTxt.style.color=''; dpTailTxt.textContent='Tailoring your resume\u2026'; }\r\n  if(dpTailFill){ dpTailFill.style.transition='none'; dpTailFill.style.width='0%'; dpTailFill.style.background=''; dpTailFill.style.animation=''; }\r\n  if(dpReqTxt){ dpReqTxt.style.transition=''; dpReqTxt.style.opacity=''; dpReqTxt.style.filter=''; }\r\n\r\n  dpSave.classList.remove('clicking');\r\n  dpSave.textContent = 'Save to Resume';\r\n  dpSave.style.background = '';\r\n\r\n  tailOverlay.classList.remove('show');\r\n  shimFill.style.transition='none'; shimFill.style.width='0%';\r\n\r\n  if(toast) toast.classList.remove('show');\r\n  cursorHide();\r\n}\r\n\r\n\/* \u2500\u2500 Single beat: click + \u2192 panel \u2192 select job \u2192 save \u2192 row green \u2192 close\r\n   No tailoring per beat. onDone fires after panel closes and row is green. \u2500\u2500 *\/\r\nfunction runBeat(seqIdx, onDone){\r\n  const s     = SEQUENCE[seqIdx];\r\n  const row   = g(s.rowId);\r\n  const plus  = g(s.plusId);\r\n  const jobEl = g(s.jobId);\r\n  if(!row||!plus||!jobEl) return;\r\n\r\n  dpReqTxt.textContent = s.req;\r\n\r\n  \/* Cursor appears on + *\/\r\n  if(!isMobile()){\r\n    cursorPlace(plus);\r\n    cursorShow();\r\n    setTimeout(()=> cursorMove(plus, 260), 250);\r\n  }\r\n\r\n  \/* STEP 1 \u2014 t=580: click + \u2192 flash green \u2192 highlight row \u2192 open detail panel.\r\n     Green click-flash gives the autonomous animation a strong, unmissable\r\n     visual cue at the click moment (cursor ripple alone reads weak,\r\n     especially on tablet + mobile). Flash fades after 400ms into the\r\n     pre-existing blue .highlighted state. *\/\r\n  setTimeout(()=>{\r\n    if(!isMobile()) cursorClick();\r\n    row.classList.add('highlighted');\r\n    plus.textContent = '\u2192';\r\n    row.classList.add('click-flash');\r\n    plus.classList.add('click-flash');\r\n    setTimeout(()=>{\r\n      row.classList.remove('click-flash');\r\n      plus.classList.remove('click-flash');\r\n    }, 400);\r\n    setTimeout(()=>{\r\n      detailPanel.classList.add('open');\r\n      if(isMobile()) mobBackdrop.classList.add('show');\r\n    }, 260);\r\n  }, 580);\r\n\r\n  \/* t=1300: cursor moves to job card *\/\r\n  setTimeout(()=>{ if(!isMobile()) cursorMove(jobEl, 400); }, 1300);\r\n\r\n  \/* STEP 2 \u2014 t=1800: select job \u2192 immediately show ADDED badge on bullet *\/\r\n  setTimeout(()=>{\r\n    if(!isMobile()) cursorClick();\r\n    ['jc-1','jc-2','jc-3'].forEach(id=>{ const c=g(id); if(c) c.classList.remove('selected'); });\r\n    jobEl.classList.add('selected');\r\n\r\n    \/* Row turns green with ADDED label as soon as job is chosen *\/\r\n    setTimeout(()=>{\r\n      row.classList.remove('highlighted');\r\n      row.classList.add('matched');\r\n      plus.textContent = '\u2713';\r\n      const sq = g(s.sqId); if(sq) sq.className='gap-sq green';\r\n    }, 320);\r\n  }, 1800);\r\n\r\n  \/* t=2600: cursor moves to Save *\/\r\n  setTimeout(()=>{ if(!isMobile()) cursorMove(dpSave, 340); }, 2600);\r\n\r\n  \/* STEP 3 \u2014 t=3040: click Save \u2192 close panel *\/\r\n  setTimeout(()=>{\r\n    if(!isMobile()) cursorClick();\r\n    dpSave.classList.add('clicking');\r\n    setTimeout(()=> dpSave.classList.remove('clicking'), 200);\r\n\r\n    setTimeout(()=>{\r\n      detailPanel.classList.remove('open');\r\n      mobBackdrop.classList.remove('show');\r\n      \/* Callback \u2014 ready for next beat *\/\r\n      setTimeout(onDone, 380);\r\n    }, 420);\r\n  }, 3040);\r\n}\r\n\r\n\/* \u2500\u2500 Sequential narrated path (desktop\/tablet, >720px): one cursor action -> one\r\n   visible effect. The detail panel slides in ONCE on beat 0 and stays open for the\r\n   whole loop. Each beat: cursor travels to the [+], clicks (only THAT row highlights),\r\n   then travels to the mapped job's radio, clicks (job stays selected), then that row\r\n   flips matched\/green\/\u2713. After the 3 pairs: Save, then the job cards slide out and the\r\n   in-panel loader slides in. Mobile keeps using runBeatBatch() (unchanged). \u2500\u2500 *\/\r\nfunction runBeatSequence(onDone){\r\n  const radioOf = el => el ? (el.querySelector('.jc-radio') || el) : null;\r\n\r\n  function beat(idx, done){\r\n    const s     = SEQUENCE[idx];\r\n    const row   = g(s.rowId);\r\n    const plus  = g(s.plusId);\r\n    const job   = g(DESK_JOB[idx]);\r\n    const radio = radioOf(job);\r\n    if(!row || !plus || !job){ done(); return; }\r\n\r\n    const first = (idx === 0);\r\n\r\n    \/* 1) cursor travels to the + button *\/\r\n    if(first){ cursorPlace(plus); cursorShow(); setTimeout(()=> cursorMove(plus, 280), 220); }\r\n    else     { cursorMove(plus, 430); }\r\n\r\n    \/* 2) click + : highlight ONLY this row + glyph swap. Beat 0 opens the panel;\r\n          later beats animate the requirement-text swap (blur+fade). *\/\r\n    const tClick = first ? 640 : 600;\r\n    setTimeout(()=>{\r\n      cursorClick();\r\n      if(first){\r\n        dpReqTxt.textContent = s.req;\r\n      } else {\r\n        dpReqTxt.style.transition = 'opacity 0.16s ease, filter 0.16s ease';\r\n        dpReqTxt.style.opacity = '0';\r\n        dpReqTxt.style.filter  = 'blur(3px)';\r\n        setTimeout(()=>{\r\n          dpReqTxt.textContent = s.req;\r\n          dpReqTxt.style.opacity = '1';\r\n          dpReqTxt.style.filter  = 'blur(0px)';\r\n        }, 160);\r\n      }\r\n\r\n      row.classList.add('highlighted');\r\n      plus.textContent = '\u2192';\r\n      row.classList.add('click-flash');\r\n      plus.classList.add('click-flash');\r\n      setTimeout(()=>{ row.classList.remove('click-flash'); plus.classList.remove('click-flash'); }, 400);\r\n\r\n      if(first) setTimeout(()=> detailPanel.classList.add('open'), 200);\r\n    }, tClick);\r\n\r\n    \/* 3) cursor travels to the mapped job's radio (wait out the panel slide on beat 0) *\/\r\n    const tToJob = tClick + (first ? 760 : 360);\r\n    setTimeout(()=> cursorMove(radio, 430), tToJob);\r\n\r\n    \/* 4) click radio: select the job (accumulates), then flip the row green \u2713 *\/\r\n    const tSelect = tToJob + 540;\r\n    setTimeout(()=>{\r\n      cursorClick();\r\n      job.classList.add('selected');\r\n      setTimeout(()=>{\r\n        row.classList.remove('highlighted');\r\n        row.classList.add('matched');\r\n        plus.textContent = '\u2713';\r\n        const sq = g(s.sqId); if(sq) sq.className = 'gap-sq green';\r\n      }, 280);\r\n    }, tSelect);\r\n\r\n    \/* 5) hand off to the next beat *\/\r\n    setTimeout(done, tSelect + 560);\r\n  }\r\n\r\n  function chain(idx){\r\n    if(idx >= SEQUENCE.length){ saveAndHandoff(onDone); return; }\r\n    beat(idx, ()=> chain(idx + 1));\r\n  }\r\n  chain(0);\r\n}\r\n\r\n\/* \u2500\u2500 Save click, then the cards-out \/ loader-in handoff \u2500\u2500 *\/\r\nfunction saveAndHandoff(onDone){\r\n  cursorMove(dpSave, 380);\r\n  setTimeout(()=>{\r\n    cursorClick();\r\n    dpSave.classList.add('clicking');\r\n    setTimeout(()=> dpSave.classList.remove('clicking'), 200);\r\n  }, 520);\r\n  setTimeout(()=>{ cursorHide(); runHandoff(onDone); }, 900);\r\n}\r\n\r\n\/* \u2500\u2500 Job cards slide OUT of .dp-where; the in-panel loader slides IN to the same\r\n   container and fills. The panel stays open and the matched gap rows stay visible. \u2500\u2500 *\/\r\nfunction runHandoff(onDone){\r\n  if(dpWhere) dpWhere.style.position = 'relative';\r\n\r\n  ['jc-1','jc-2','jc-3'].forEach((id, k)=>{\r\n    const c = g(id);\r\n    if(!c) return;\r\n    setTimeout(()=>{\r\n      c.style.transition = 'transform 0.34s cubic-bezier(0.4,0,0.2,1), opacity 0.34s ease, filter 0.34s ease';\r\n      c.style.transform  = 'translateX(18px)';\r\n      c.style.opacity    = '0';\r\n      c.style.filter     = 'blur(4px)';\r\n    }, k * 60);\r\n  });\r\n\r\n  setTimeout(()=>{\r\n    if(!dpTail){ setTimeout(onDone, 1600); return; }\r\n    dpTail.style.display    = 'flex';\r\n    dpTail.style.transition = 'none';\r\n    dpTail.style.opacity    = '0';\r\n    dpTail.style.transform  = 'translateY(8px)';\r\n    dpTail.style.filter     = 'blur(4px)';\r\n    void dpTail.offsetWidth;                 \/* commit the \"from\" state before transitioning *\/\r\n    dpTail.style.transition = 'opacity 0.36s ease, transform 0.36s cubic-bezier(0.4,0,0.2,1), filter 0.36s ease';\r\n    dpTail.style.opacity    = '1';\r\n    dpTail.style.transform  = 'translateY(0px)';\r\n    dpTail.style.filter     = 'blur(0px)';\r\n\r\n    if(dpTailFill){\r\n      dpTailFill.style.transition = 'none';\r\n      dpTailFill.style.width = '0%';\r\n      void dpTailFill.offsetWidth;\r\n      setTimeout(()=>{\r\n        dpTailFill.style.transition = 'width 1.4s cubic-bezier(0.16,1,0.3,1)';\r\n        dpTailFill.style.width = '100%';\r\n      }, 120);\r\n    }\r\n  }, 260);\r\n\r\n  \/* Completion confirmation: once the bar finishes filling, flip the label to\r\n     \"Resume tailoring complete\" and turn the text + bar brand green (#22c55e,\r\n     the same success green as the matched rows). *\/\r\n  setTimeout(()=>{\r\n    if(dpTailTxt){\r\n      dpTailTxt.style.transition = 'color 0.3s ease';\r\n      dpTailTxt.style.color = '#22c55e';\r\n      dpTailTxt.textContent = 'Resume tailoring complete';\r\n    }\r\n    if(dpTailFill){\r\n      dpTailFill.style.animation = 'none';\r\n      dpTailFill.style.background = '#22c55e';\r\n    }\r\n  }, 1820);\r\n\r\n  setTimeout(onDone, 2100);\r\n}\r\n\r\n\/* \u2500\u2500 P2-8a: Batched 1-2-3 \u2014 all 3 bullets added, all 3 jobs selected, in ONE\r\n   detail-panel session. Replaces the 3 sequential runBeat()s (which can't run\r\n   in parallel: they share one detailPanel + one cursor). Reuses the exact same\r\n   elements\/classes as runBeat(); runBeat() is left intact but unused. Covers\r\n   desktop + mobile via the same isMobile() guards. \u2500\u2500 *\/\r\nfunction runBeatBatch(onDone){\r\n  const items = [0,1,2].map(i=>{\r\n    const s = SEQUENCE[i];\r\n    return { s, row:g(s.rowId), plus:g(s.plusId), job:g(s.jobId) };\r\n  });\r\n  if(items.some(it=>!it.row||!it.plus||!it.job)) return;\r\n\r\n  dpReqTxt.textContent = items[0].s.req;\r\n\r\n  if(!isMobile()){\r\n    cursorPlace(items[0].plus);\r\n    cursorShow();\r\n    setTimeout(()=> cursorMove(items[0].plus, 260), 250);\r\n  }\r\n\r\n  \/* STEP 1 \u2014 t=580: add all 3 bullets (fast 1-2-3 stagger) \u2192 open panel once *\/\r\n  setTimeout(()=>{\r\n    if(!isMobile()) cursorClick();\r\n    items.forEach((it, idx)=>{\r\n      setTimeout(()=>{\r\n        it.row.classList.add('highlighted');\r\n        it.plus.textContent = '\u2192';\r\n        it.row.classList.add('click-flash');\r\n        it.plus.classList.add('click-flash');\r\n        setTimeout(()=>{\r\n          it.row.classList.remove('click-flash');\r\n          it.plus.classList.remove('click-flash');\r\n        }, 400);\r\n      }, idx * 180);\r\n    });\r\n    setTimeout(()=>{\r\n      detailPanel.classList.add('open');\r\n      if(isMobile()) mobBackdrop.classList.add('show');\r\n    }, 800);\r\n  }, 580);\r\n\r\n  \/* STEP 2 \u2014 t=1900: select all 3 jobs; each flips its row to green \u2713 *\/\r\n  const S2 = 1900, JOB_GAP = 460;\r\n  items.forEach((it, idx)=>{\r\n    setTimeout(()=>{\r\n      if(!isMobile()) cursorMove(it.job, 300);\r\n      setTimeout(()=>{\r\n        if(!isMobile()) cursorClick();\r\n        \/* P2-8a: accumulate \u2014 all 3 jobs stay selected (spec: \"select all\r\n           three jobs\"). resetAll() clears them between cycles. *\/\r\n        it.job.classList.add('selected');\r\n        setTimeout(()=>{\r\n          it.row.classList.remove('highlighted');\r\n          it.row.classList.add('matched');\r\n          it.plus.textContent = '\u2713';\r\n          const sq = g(it.s.sqId); if(sq) sq.className = 'gap-sq green';\r\n        }, 280);\r\n      }, isMobile() ? 0 : 320);\r\n    }, S2 + idx * JOB_GAP);\r\n  });\r\n\r\n  \/* STEP 3 \u2014 after the 3 jobs: cursor \u2192 Save \u2192 click \u2192 close panel \u2192 onDone *\/\r\n  const S3 = S2 + 3 * JOB_GAP + 400;\r\n  setTimeout(()=>{ if(!isMobile()) cursorMove(dpSave, 340); }, S3);\r\n  setTimeout(()=>{\r\n    if(!isMobile()) cursorClick();\r\n    dpSave.classList.add('clicking');\r\n    setTimeout(()=> dpSave.classList.remove('clicking'), 200);\r\n    setTimeout(()=>{\r\n      detailPanel.classList.remove('open');\r\n      mobBackdrop.classList.remove('show');\r\n      setTimeout(onDone, 380);\r\n    }, 420);\r\n  }, S3 + 360);\r\n}\r\n\r\n\/* \u2500\u2500 Tailoring sequence: fires once after all beats \u2500\u2500 *\/\r\nfunction runTailoring(onDone){\r\n  if(!isMobile()) cursorHide();\r\n\r\n  \/* Reset the overlay to its in-progress state each cycle \u2014 the completion flip\r\n     below mutates the label colour\/text + bar colour, so undo that here so the\r\n     next loop starts blue \"Tailoring your resume...\". *\/\r\n  var tailTxt = tailOverlay ? tailOverlay.querySelector('.tailoring-txt') : null;\r\n  if(tailTxt){ tailTxt.style.transition='none'; tailTxt.style.color=''; tailTxt.textContent='Tailoring your resume...'; }\r\n  if(shimFill){ shimFill.style.background=''; }\r\n\r\n  \/* Show shimmer *\/\r\n  tailOverlay.classList.add('show');\r\n  setTimeout(()=>{\r\n    shimFill.style.transition='width 1.5s cubic-bezier(0.16,1,0.3,1)';\r\n    shimFill.style.width='100%';\r\n  }, 80);\r\n\r\n  \/* Completion confirmation \u2014 mobile parity with the desktop in-panel loader,\r\n     which flips to a green \"Resume tailoring complete\" at the end. Once the bar\r\n     has filled (~t=1580), turn the label + bar brand-green (#22c55e, the matched-\r\n     row success green) and swap the message. Fires INSIDE the existing 2000ms\r\n     window and is held ~400ms as the brief \"show the result\" pause \u2014 the hide\r\n     (t=2000) \/ onDone (t=2200) and the whole scene-loop timing are UNCHANGED. *\/\r\n  setTimeout(()=>{\r\n    if(tailTxt){ tailTxt.style.transition='color 0.3s ease'; tailTxt.style.color='#22c55e'; tailTxt.textContent='Resume tailoring complete'; }\r\n    if(shimFill){ shimFill.style.animation='none'; shimFill.style.background='#22c55e'; }\r\n  }, 1600);\r\n\r\n  \/* Complete at t=2000 *\/\r\n  setTimeout(()=>{\r\n    tailOverlay.classList.remove('show');\r\n    shimFill.style.transition='none'; shimFill.style.width='0%';\r\n    setTimeout(onDone, 200);\r\n  }, 2000);\r\n}\r\n\r\n\/* \u2500\u2500 Main loop (P2-8a: single batched 1-2-3, then tailoring) \u2500\u2500 *\/\r\nfunction runLoop(){\r\n  if (prefersReduce()){ paintFinalStatic(); return; }\r\n  cycleCount++;\r\n  resetAll();\r\n\r\n  \/* Shared tail: toast + hold + reloop (both desktop and mobile paths land here). *\/\r\n  const finish = ()=>{\r\n    if(toast) toast.classList.add('show');\r\n    setTimeout(()=>{ if(toast) toast.classList.remove('show'); }, 2500);\r\n    loopTimer = setTimeout(()=>{\r\n      if (cycleCount >= MAX_CYCLES) return; \/* settle in terminal state *\/\r\n      resetAll();\r\n      setTimeout(runLoop, 500);\r\n    }, 3200);\r\n  };\r\n\r\n  setTimeout(()=>{\r\n    if(isMobile()){\r\n      \/* Mobile (<=720px): unchanged batched path + shell-level tailoring overlay *\/\r\n      runBeatBatch(()=>{ setTimeout(()=> runTailoring(finish), 350); });\r\n    } else {\r\n      \/* Desktop\/tablet (>720px): sequential path; it runs its own in-panel tailoring *\/\r\n      runBeatSequence(finish);\r\n    }\r\n  }, 700);\r\n}\r\n\r\n\/* \u2500\u2500 Reduced-motion: paint the finished state (all gaps matched) with no animation,\r\n   so the result still reads without any motion. \u2500\u2500 *\/\r\nfunction paintFinalStatic(){\r\n  resetAll();\r\n  SEQUENCE.forEach((s)=>{\r\n    const row=g(s.rowId), plus=g(s.plusId), sq=g(s.sqId);\r\n    if(row){ row.classList.remove('highlighted'); row.classList.add('matched'); }\r\n    if(plus){ plus.textContent='\u2713'; }\r\n    if(sq){ sq.className='gap-sq green'; }\r\n  });\r\n}\r\n\r\n\/* Boot *\/\r\n\r\n\/* \u2500\u2500 Trigger: MutationObserver on aria-hidden + class (JHCarousel.updateNav) \u2500\u2500 *\/\r\nvar ext3Slide = document.getElementById('jhe3_ZMPTdU').closest('.jh-it-tile');\r\nvar ext3Running = false;\r\n\r\nfunction ext3Start() {\r\n    if (ext3Running) return;\r\n    ext3Running = true;\r\n    cycleCount = 0; \/* Phase A: reset cycle cap so a scroll-back replays *\/\r\n    resetAll();\r\n    setTimeout(runLoop, 400);\r\n}\r\nfunction ext3Stop() {\r\n    if (!ext3Running) return;\r\n    ext3Running = false;\r\n    resetAll();\r\n}\r\nfunction ext3IsActive() {\r\n    return ext3Slide && ext3Slide.classList.contains('is-focal');\r\n}\r\n\r\nif (ext3Slide) {\r\n    new MutationObserver(function() {\r\n        if (ext3IsActive()) { ext3Start(); } else { ext3Stop(); }\r\n    }).observe(ext3Slide, { attributes: true, attributeFilter: ['class'] });\r\n\r\n    setInterval(function() {\r\n        if (ext3IsActive() && !ext3Running) { ext3Start(); }\r\n        else if (!ext3IsActive() && ext3Running) { ext3Stop(); }\r\n    }, 350);\r\n\r\n    if (ext3IsActive()) ext3Start();\r\n}\r\n                        })();\r\n                        <\/script>\r\n\r\n            <\/div><!-- \/.jh-it-tile-stage -->\r\n            <div class=\"jh-it-tile-copy\">\r\n                <p class=\"jh-it-tile-desc\">Every must-have and nice-to-have, scored against your resume line by line. The gaps a recruiter would flag in eight seconds &mdash; surfaced. The matches you forgot to claim &mdash; auto-tagged. You fix what matters before they ever open your file.<\/p>\r\n                <ul class=\"jh-it-tile-wins\">\r\n                    <li>Every requirement matched, scored, color-coded<\/li>\r\n                    <li>Hidden matches auto-tagged from your background<\/li>\r\n                    <li>One-click fixes for the gaps that lose callbacks<\/li>\r\n                <\/ul>\r\n                <span class=\"jh-it-tile-cta\">See the gaps &rarr;<\/span>\r\n            <\/div>\r\n          <\/div><!-- \/.jh-it-tile-row -->\r\n        <\/a>\r\n\r\n        <!-- Bottom-right: DECRYPTION (aliases to \/features\/#insider-intel) -->\r\n        <a class=\"jh-it-tile jh-it-tile--decryption\" href=\"https:\/\/justhired.ai\/clonev2\/features\/#insider-intel\" data-tile=\"decryption\">\r\n          <div class=\"jh-it-tile-head\">\r\n            <span class=\"jh-it-tile-eyebrow\">03 &middot; ROLE DECRYPTION<\/span>\r\n            <h3 class=\"jh-it-tile-headline\">Match every keyword. <span class=\"jh-it-headline-accent\">Without making one up.<\/span><\/h3>\r\n          <\/div>\r\n          <div class=\"jh-it-tile-row\">\r\n            <div class=\"jh-it-tile-stage\">\r\n\r\n                        <!-- Demo narrator: static caption above the keyword-match animation\r\n                             (desktop\/tablet only; hidden on mobile via injected CSS). -->\r\n                        <div class=\"jh-it-stage-cap\" aria-hidden=\"true\">\r\n                            <span class=\"jh-it-stage-cap-line\">Matching the posting&rsquo;s keywords to your real skills<\/span>\r\n                            <span class=\"jh-it-stage-cap-facts\">key requirements &middot; key qualifications &middot; key responsibilities<\/span>\r\n                        <\/div>\r\n\r\n                                                <div id=\"jhe2_4Bd3me\" class=\"jh-ext-shell-wrap\">\r\n<div class=\"shell\">\r\n\r\n  <!-- Connector SVG overlay -->\r\n  <svg id=\"conn-svg\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><\/svg>\r\n\r\n  <!-- \u2550\u2550\u2550 JD PANEL \u2550\u2550\u2550 -->\r\n  <div class=\"jd-panel\">\r\n\r\n    <div class=\"rp-side-tag\" aria-hidden=\"true\">The Posting<\/div>\r\n    <div class=\"jd-header\">\r\n      <div class=\"jd-co-row\">\r\n        <div class=\"jd-co-mark\">CG<\/div>\r\n        <span class=\"jd-co-name\">Callaway Golf<\/span>\r\n        <div class=\"jd-co-sep\"><\/div>\r\n        <span class=\"jd-co-loc\">Carlsbad, CA<\/span>\r\n        <div class=\"jd-co-sep\"><\/div>\r\n        <span class=\"jd-co-sal\">$91,200\u2013$99,200 \/ yr<\/span>\r\n      <\/div>\r\n      <div class=\"jd-title\">Sales Analyst<\/div>\r\n      <div class=\"jd-chips-row\">\r\n        <span class=\"jd-chip\">Full-time<\/span>\r\n        <span class=\"jd-chip\">Mid-level<\/span>\r\n        <span class=\"jd-chip\">On-site<\/span>\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"jd-scan-bar\">\r\n      <div class=\"scan-dot\"><\/div>\r\n      <span class=\"scan-txt\" id=\"scan-txt\">Ready to analyze<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"jd-body\" id=\"jd-body\">\r\n      <div id=\"scan-beam\"><\/div>\r\n\r\n      <div class=\"jd-section\">\r\n        <div class=\"jd-sec-hdr\" id=\"sec-req\">KEY Requirements<\/div>\r\n        <ul class=\"jd-list\">\r\n          <li>Proficiency in <span class=\"kw\" id=\"kw-sql\">SQL Database<\/span> and <span class=\"kw\" id=\"kw-excel\">Excel Macros<\/span> for data extraction and modeling<\/li>\r\n          <li>Strong <span class=\"kw\" id=\"kw-analytical\">analytical thinking<\/span> \u2014 ability to synthesize complex datasets into insights<\/li>\r\n          <li>Experience with CRM platforms, particularly <span class=\"kw\" id=\"kw-sf\">Salesforce<\/span><\/li>\r\n          <li>Background in sales <span class=\"kw\" id=\"kw-forecast\">forecasting<\/span> and demand planning a plus<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"jd-section\">\r\n        <div class=\"jd-sec-hdr\" id=\"sec-resp\">KEY Responsibilities<\/div>\r\n        <ul class=\"jd-list\">\r\n          <li>Perform <span class=\"kw\" id=\"kw-data\">data analysis<\/span> on sales performance across North American retail channels<\/li>\r\n          <li>Partner <span class=\"kw\" id=\"kw-cf\">cross-functional<\/span> with marketing, finance, and retail operations<\/li>\r\n          <li>Build <span class=\"kw\" id=\"kw-strategic\">strategic<\/span> reporting dashboards to surface KPIs and trends<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"jd-section\">\r\n        <div class=\"jd-sec-hdr\" id=\"sec-qual\">KEY Qualifications<\/div>\r\n        <ul class=\"jd-list\">\r\n          <li><span class=\"kw\" id=\"kw-detail\">Detail-oriented<\/span> with high standards for data accuracy and documentation<\/li>\r\n          <li>Demonstrated <span class=\"kw\" id=\"kw-adapt\">adaptability<\/span> in fast-paced, evolving business environments<\/li>\r\n          <li>Excellent verbal and written <span class=\"kw\" id=\"kw-comm\">communication<\/span> skills required<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div><!-- \/jd-panel -->\r\n\r\n  <!-- \u2550\u2550\u2550 RESUME PANEL \u2550\u2550\u2550 -->\r\n  <div class=\"resume-panel\">\r\n\r\n    <div class=\"rp-side-tag\" aria-hidden=\"true\">Your Profile<\/div>\r\n    <div class=\"rp-hdr\">\r\n      <div>\r\n        <div class=\"rp-name\">ALEX R. CHEN<\/div>\r\n        <div class=\"rp-role\">Sales Initiatives Analyst<\/div>\r\n      <\/div>\r\n      <div class=\"rp-badge\" id=\"rp-badge\">\r\n        <div class=\"rp-dot\"><\/div>\r\n        <span class=\"rp-badge-txt\" id=\"rp-badge-txt\">Standby<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"rp-legend\">\r\n      <div class=\"leg-item\"><div class=\"leg-dot skill\"><\/div><span class=\"leg-txt\">Skill<\/span><\/div>\r\n      <div class=\"leg-item\"><div class=\"leg-dot comp\"><\/div><span class=\"leg-txt\">Competency<\/span><\/div>\r\n      <div class=\"leg-item\"><div class=\"leg-dot attr\"><\/div><span class=\"leg-txt\">Attribute<\/span><\/div>\r\n    <\/div>\r\n\r\n    <div class=\"chip-cols\">\r\n      <div class=\"chip-col col-skill\">\r\n        <div class=\"cc-hdr\">Skills<\/div>\r\n        <div class=\"chip-list\">\r\n          <div class=\"chip\" id=\"chip-sql\"        data-cat=\"skill\"        data-text=\"SQL Database\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n          <div class=\"chip\" id=\"chip-excel\"       data-cat=\"skill\"        data-text=\"Excel Macros\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n          <div class=\"chip\" id=\"chip-data\"        data-cat=\"skill\"        data-text=\"Data Analysis\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"chip-col col-comp\">\r\n        <div class=\"cc-hdr\">Competencies<\/div>\r\n        <div class=\"chip-list\">\r\n          <div class=\"chip\" id=\"chip-analytical\"  data-cat=\"competency\"   data-text=\"Analytical Thinking\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n          <div class=\"chip\" id=\"chip-cf\"           data-cat=\"competency\"   data-text=\"Cross-functional\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n          <div class=\"chip\" id=\"chip-strategic\"   data-cat=\"competency\"   data-text=\"Strategic\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"chip-col col-attr\">\r\n        <div class=\"cc-hdr\">Attributes<\/div>\r\n        <div class=\"chip-list\">\r\n          <div class=\"chip\" id=\"chip-detail\"      data-cat=\"attribute\"    data-text=\"Detail-oriented\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n          <div class=\"chip\" id=\"chip-adapt\"       data-cat=\"attribute\"    data-text=\"Adaptability\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n          <div class=\"chip\" id=\"chip-comm\"        data-cat=\"attribute\"    data-text=\"Communication\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"ats-sec\">\r\n      <div class=\"ats-row\">\r\n        <span class=\"ats-lbl\">ATS Match<\/span>\r\n        <div class=\"ats-track\"><div class=\"ats-fill\" id=\"ats-fill\"><\/div><\/div>\r\n        <span class=\"ats-pct\" id=\"ats-pct\">\u2014<\/span>\r\n      <\/div>\r\n      <div class=\"ats-sub\" id=\"ats-sub\">Awaiting scan...<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"gap-sec\">\r\n      <div class=\"gap-hdr\">Gaps Detected<\/div>\r\n      <div class=\"gap-list\">\r\n        <div class=\"gap-chip\" id=\"gap-sf\">Salesforce<\/div>\r\n        <div class=\"gap-chip\" id=\"gap-forecast\">Forecasting<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"add-wrap\">\r\n      <button class=\"add-btn\" id=\"add-btn\">\u2726 Add 9 Matched Keywords to Resume<\/button>\r\n    <\/div>\r\n\r\n  <\/div><!-- \/resume-panel -->\r\n\r\n<\/div><!-- \/shell -->\r\n\r\n  <!-- \u2550\u2550\u2550 MOBILE SPOTLIGHT (Option 3) \u2550\u2550\u2550 -->\r\n  <div id=\"mob-spotlight\">\r\n\r\n    <div class=\"mob-jd-hdr\">\r\n      <div class=\"mob-jd-co-row\">\r\n        <div class=\"mob-jd-mark\">CG<\/div>\r\n        <span class=\"mob-jd-co\">Callaway Golf<\/span>\r\n        <div class=\"mob-jd-sep\"><\/div>\r\n        <span class=\"mob-jd-sal\">$91,200\u2013$99,200 \/ yr<\/span>\r\n      <\/div>\r\n      <div class=\"mob-jd-title\">Sales Analyst<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mob-scan-bar\">\r\n      <div class=\"scan-dot\"><\/div>\r\n      <span class=\"mob-scan-txt\" id=\"mob-scan-txt\">Ready to analyze<\/span>\r\n    <\/div>\r\n\r\n    <div class=\"mob-stage\" id=\"mob-stage\">\r\n\r\n      <!-- TOP: Cycling spotlight card -->\r\n      <div class=\"mob-card\" id=\"mob-card\">\r\n        <div class=\"mob-sec-badge\" id=\"mob-sec-badge\">Requirements<\/div>\r\n        <div class=\"mob-sentence\" id=\"mob-sentence\"><\/div>\r\n        <div class=\"mob-arrow\">\r\n          <div class=\"mob-arrow-line\"><\/div>\r\n          <div class=\"mob-arrow-head\">\u25bc<\/div>\r\n        <\/div>\r\n        <div class=\"mob-chip-row\">\r\n          <div class=\"mob-cat-dot\" id=\"mob-cat-dot\"><\/div>\r\n          <div class=\"mob-chip-text\" id=\"mob-chip-text\">\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588<\/div>\r\n          <div class=\"mob-cat-label\" id=\"mob-cat-label\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- TOP: Final state (replaces card after all matches) -->\r\n      <div class=\"mob-final\" id=\"mob-final\">\r\n        <div class=\"mob-final-badge\">\r\n          <span class=\"mob-final-dot\"><\/span>\r\n          <span class=\"mob-final-txt\"><span id=\"mob-final-count\">00<\/span>\/09 matches identified \u00b7 ready to inject<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- BOTTOM: Persistent live chip grid -->\r\n      <div class=\"mob-live-grid\">\r\n        <div class=\"mob-col col-skill\">\r\n          <div class=\"mob-col-hdr\">Skills<\/div>\r\n          <div class=\"mob-lchip skill\" id=\"lc-sql\">SQL Database<\/div>\r\n          <div class=\"mob-lchip skill\" id=\"lc-excel\">Excel Macros<\/div>\r\n          <div class=\"mob-lchip skill\" id=\"lc-data\">Data Analysis<\/div>\r\n        <\/div>\r\n        <div class=\"mob-col col-comp\">\r\n          <div class=\"mob-col-hdr\">Competencies<\/div>\r\n          <div class=\"mob-lchip competency\" id=\"lc-analytical\">Analytical<\/div>\r\n          <div class=\"mob-lchip competency\" id=\"lc-cf\">Cross-func.<\/div>\r\n          <div class=\"mob-lchip competency\" id=\"lc-strategic\">Strategic<\/div>\r\n        <\/div>\r\n        <div class=\"mob-col col-attr\">\r\n          <div class=\"mob-col-hdr\">Attributes<\/div>\r\n          <div class=\"mob-lchip attribute\" id=\"lc-detail\">Detail-oriented<\/div>\r\n          <div class=\"mob-lchip attribute\" id=\"lc-adapt\">Adaptability<\/div>\r\n          <div class=\"mob-lchip attribute\" id=\"lc-comm\">Communication<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div><!-- \/mob-stage -->\r\n\r\n    <div class=\"mob-progress\" id=\"mob-progress\">\r\n      <!-- 9 dots injected by JS -->\r\n    <\/div>\r\n\r\n  <\/div><!-- \/mob-spotlight -->\r\n                        <\/div>\r\n                        <script>\r\n                        (function(){\r\n'use strict';\r\n\r\nconst g  = id => document.getElementById('jhe2_4Bd3me').querySelector('#' + id);\r\nconst qs = s  => document.querySelector(s);\r\n\r\nconst shell    = document.getElementById('jhe2_4Bd3me').querySelector('.shell');\r\nconst connSvg  = g('conn-svg');\r\nconst scanBeam = g('scan-beam');\r\nconst scanTxt  = g('scan-txt');\r\nconst rpBadge  = g('rp-badge');\r\nconst rpBadgeTxt = g('rp-badge-txt');\r\nconst atsFill  = g('ats-fill');\r\nconst atsPct   = g('ats-pct');\r\nconst atsSub   = g('ats-sub');\r\nconst addBtn   = g('add-btn');\r\n\r\n\/* \u2500\u2500 Glitch chars \u2500\u2500 *\/\r\nconst GLYPHS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_$%#!';\r\nconst rg = () => GLYPHS[Math.floor(Math.random() * GLYPHS.length)];\r\n\r\n\/* Category \u2192 connector stroke color *\/\r\nconst CAT_COLOR = {\r\n  skill:      'rgba(5,84,242,0.85)',\r\n  competency: 'rgba(99,102,241,0.85)',\r\n  attribute:  'rgba(96,176,255,0.7)',\r\n};\r\n\r\n\/* \u2500\u2500 Position helper (relative to shell) \u2500\u2500 *\/\r\nfunction pos(el){\r\n  const sr = shell.getBoundingClientRect();\r\n  const er = el.getBoundingClientRect();\r\n  return {\r\n    l: er.left - sr.left,  r: er.right  - sr.left,\r\n    t: er.top  - sr.top,   b: er.bottom - sr.top,\r\n    mx:(er.left+er.right)\/2 - sr.left,\r\n    my:(er.top +er.bottom)\/2 - sr.top,\r\n  };\r\n}\r\n\r\n\/* \u2500\u2500 Draw animated bezier connector \u2500\u2500 *\/\r\nfunction drawLine(fromEl, toEl, cat, onArrival){\r\n  const f = pos(fromEl);\r\n  const t = pos(toEl);\r\n  const x1 = f.r + 3;\r\n  const y1 = f.my;\r\n  const x2 = t.l - 3;\r\n  const y2 = t.my;\r\n  const cp = Math.abs(x2 - x1) * 0.42;\r\n  const d  = `M ${x1} ${y1} C ${x1+cp} ${y1} ${x2-cp} ${y2} ${x2} ${y2}`;\r\n\r\n  const path = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','path');\r\n  path.setAttribute('d', d);\r\n  path.setAttribute('fill','none');\r\n  path.setAttribute('stroke', CAT_COLOR[cat]);\r\n  path.setAttribute('stroke-width','1.4');\r\n\r\n  \/* Endpoint dots *\/\r\n  [[x1,y1],[x2,y2]].forEach(([cx,cy])=>{\r\n    const c = document.createElementNS('http:\/\/www.w3.org\/2000\/svg','circle');\r\n    c.setAttribute('cx',cx); c.setAttribute('cy',cy);\r\n    c.setAttribute('r','2.5'); c.setAttribute('fill', CAT_COLOR[cat]);\r\n    connSvg.appendChild(c);\r\n    setTimeout(()=>{ c.style.transition='opacity 1.4s ease'; c.style.opacity='0.1'; }, 900);\r\n  });\r\n\r\n  \/* Dash-draw animation *\/\r\n  connSvg.appendChild(path);\r\n  const len = path.getTotalLength();\r\n  path.style.strokeDasharray  = len;\r\n  path.style.strokeDashoffset = len;\r\n  requestAnimationFrame(()=>{\r\n    path.style.transition = 'stroke-dashoffset 0.42s cubic-bezier(0.4,0,0.2,1)';\r\n    path.style.strokeDashoffset = '0';\r\n  });\r\n\r\n  setTimeout(()=>{\r\n    if(onArrival) onArrival();\r\n    setTimeout(()=>{\r\n      path.style.transition += ',opacity 1.5s ease';\r\n      path.style.opacity = '0.1';\r\n    }, 700);\r\n  }, 440);\r\n}\r\n\r\n\/* \u2500\u2500 Chip scramble \u2192 lock \u2500\u2500 *\/\r\nfunction lockChip(chipEl){\r\n  const text = chipEl.dataset.text;\r\n  const cat  = chipEl.dataset.cat;\r\n  const len  = text.length;\r\n  \/* Decoupled bg from scramble (2026-05-26): colour the cell the INSTANT the\r\n     connector lands \u2014 bg\/border\/glow + readable text apply now via the .chip\r\n     0.3s transition \u2014 so the scramble below runs VISIBLY in the locked colour\r\n     instead of near-invisibly at the base ~8% white. Previously locked-${cat}\r\n     was added only at scramble-end (the if(prog>=len) branch), so the cell\r\n     appeared ~1s after the line arrived. lockChip is called on line-arrival\r\n     (drawLine onArrival), so this fires exactly when the line lands. *\/\r\n  chipEl.classList.add(`locked-${cat}`);\r\n  let prog = 0;\r\n  const iv = setInterval(()=>{\r\n    let out = '';\r\n    for(let i=0;i<len;i++){\r\n      out += i < prog ? text[i] : rg();\r\n    }\r\n    chipEl.textContent = out;\r\n    prog += 0.4;\r\n    if(prog >= len){\r\n      clearInterval(iv);\r\n      chipEl.textContent = text;\r\n    }\r\n  }, 38);\r\n}\r\n\r\n\/* \u2500\u2500 Flash keyword in JD \u2500\u2500 *\/\r\nfunction flashKw(el, cat, isGap){\r\n  el.classList.add(isGap ? 'lit-gap' : `lit-${cat}`);\r\n}\r\n\r\n\/* \u2500\u2500 Match: flash JD \u2192 draw line \u2192 scramble chip \u2500\u2500 *\/\r\nfunction doMatch(kwId, chipId, cat){\r\n  const kw   = g(kwId);\r\n  const chip = g(chipId);\r\n  if(!kw || !chip) return;\r\n  flashKw(kw, cat, false);\r\n  if(window.innerWidth > 720){\r\n    drawLine(kw, chip, cat, ()=> lockChip(chip));\r\n  } else {\r\n    setTimeout(()=> lockChip(chip), 120);\r\n  }\r\n}\r\n\r\n\/* \u2500\u2500 Gap detection \u2500\u2500 *\/\r\nfunction doGap(kwId, gapId){\r\n  const kw  = g(kwId);\r\n  const gap = g(gapId);\r\n  if(kw)  flashKw(kw, 'skill', true);\r\n  if(gap) gap.classList.add('show');\r\n}\r\n\r\n\/* \u2500\u2500 Animate ATS counter \u2500\u2500 *\/\r\nfunction animateATS(target, ms){\r\n  const t0 = Date.now();\r\n  atsFill.style.width = target + '%';\r\n  (function tick(){\r\n    const pct = Math.min((Date.now()-t0)\/ms, 1);\r\n    const eased = 1 - Math.pow(1-pct, 3);\r\n    const v = Math.round(eased * target);\r\n    atsPct.textContent = v + '%';\r\n    if(pct < 1) requestAnimationFrame(tick);\r\n    else {\r\n      atsPct.textContent = target + '%';\r\n      atsPct.style.color = target >= 75 ? '#22c55e' : '#60B0FF';\r\n      atsSub.textContent = '9 matched \u00b7 2 gaps \u00b7 ready to inject';\r\n    }\r\n  })();\r\n}\r\n\r\n\/* \u2500\u2500 Reset all state \u2500\u2500 *\/\r\nfunction resetAll(){\r\n  \/* Clear SVG *\/\r\n  while(connSvg.firstChild) connSvg.removeChild(connSvg.firstChild);\r\n\r\n  \/* Scan beam *\/\r\n  scanBeam.style.transition = 'none';\r\n  scanBeam.style.opacity    = '0';\r\n  scanBeam.style.transform  = 'translateY(0)';\r\n  scanBeam.style.animation  = 'none';\r\n\r\n  \/* JD keywords *\/\r\n  document.querySelectorAll('.kw').forEach(el=> el.className = 'kw');\r\n\r\n  \/* Section headers *\/\r\n  ['sec-req','sec-resp','sec-qual'].forEach(id=>{\r\n    const el = g(id); if(el) el.classList.remove('lit');\r\n  });\r\n\r\n  \/* Status text *\/\r\n  scanTxt.textContent = 'Ready to analyze';\r\n  scanTxt.classList.remove('hot');\r\n  rpBadge.classList.remove('active');\r\n  rpBadgeTxt.textContent = 'Standby';\r\n\r\n  \/* Chips \u2014 restore placeholder *\/\r\n  document.querySelectorAll('.chip').forEach(el=>{\r\n    const t = el.dataset.text || '';\r\n    el.className = 'chip';\r\n    el.textContent = '\u2588'.repeat(t.length);\r\n  });\r\n\r\n  \/* Gaps *\/\r\n  ['gap-sf','gap-forecast'].forEach(id=>{\r\n    const el = g(id); if(el) el.classList.remove('show');\r\n  });\r\n\r\n  \/* Score *\/\r\n  atsFill.style.transition = 'none';\r\n  atsFill.style.width = '0%';\r\n  atsPct.textContent = '\u2014';\r\n  atsPct.style.color = '';\r\n  atsSub.textContent = 'Awaiting scan...';\r\n\r\n  \/* Button *\/\r\n  addBtn.classList.remove('show');\r\n}\r\n\r\n\/* \u2500\u2500 Main loop \u2500\u2500 *\/\r\nconst LOOP_MS = 12000;\r\nconst isMobile = () => window.innerWidth <= 720;\r\n\r\n\/* Phase A: bound the demo lifecycle.\r\n   - prefersReduce: honor OS-level reduced-motion preference; don't animate at all.\r\n   - MAX_CYCLES \/ cycleCount: cap the demo at 2 full loops, then settle.\r\n   cycleCount is reset in ext2Start() so a scroll-back replays a fresh 2 cycles.\r\n   The dispatcher is the cycle-count gate; the reschedules in runLoopDesktop\r\n   and runLoopMobile both check before reseting and re-entering. *\/\r\nconst MAX_CYCLES = 2;\r\nlet cycleCount = 0;\r\nconst prefersReduce = () => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\nfunction runLoop(){\r\n  if (prefersReduce()) return;\r\n  cycleCount++;\r\n  if(isMobile()) runLoopMobile();\r\n  else           runLoopDesktop();\r\n}\r\n\r\n\/* P2-8b: one section at a time (req \u2192 resp \u2192 qual). Each pass shows ONLY its\r\n   .jd-section, scan-beams its (short) height, fires only its matches\/gaps\r\n   while it's visible, then advances. Eliminates the ~50% dead space (the JD\r\n   no longer reserves height for all 3 sections). doMatch\/doGap\/drawLine\/\r\n   resetAll\/animateATS reused unchanged; runLoopMobile untouched. *\/\r\nfunction runLoopDesktop(){\r\n  resetAll();\r\n\r\n  const secs = g('jd-body').querySelectorAll('.jd-section');\r\n  const PASS = [\r\n    { hdr:'sec-req',  el:secs[0],\r\n      matches:[['kw-sql','chip-sql','skill'],['kw-excel','chip-excel','skill'],['kw-analytical','chip-analytical','competency']],\r\n      gaps:[['kw-sf','gap-sf'],['kw-forecast','gap-forecast']] },\r\n    { hdr:'sec-resp', el:secs[1],\r\n      matches:[['kw-data','chip-data','skill'],['kw-cf','chip-cf','competency'],['kw-strategic','chip-strategic','competency']],\r\n      gaps:[] },\r\n    { hdr:'sec-qual', el:secs[2],\r\n      matches:[['kw-detail','chip-detail','attribute'],['kw-adapt','chip-adapt','attribute'],['kw-comm','chip-comm','attribute']],\r\n      gaps:[] },\r\n  ];\r\n\r\n  scanTxt.classList.add('hot');\r\n  scanTxt.textContent = 'Extracting skills, competencies, attributes...';\r\n  rpBadge.classList.add('active');\r\n  rpBadgeTxt.textContent = 'Scanning';\r\n\r\n  const MGAP = 380, BASE = 300;\r\n\r\n  function runPass(i){\r\n    if(i >= PASS.length){ finish(); return; }\r\n    const p = PASS[i];\r\n    PASS.forEach((q,qi)=>{ if(q.el) q.el.style.display = (qi===i) ? 'block' : 'none'; });\r\n    const h = g(p.hdr); if(h) h.classList.add('lit');\r\n\r\n    requestAnimationFrame(()=>{\r\n      const bodyH = g('jd-body').offsetHeight;\r\n      scanBeam.style.transition='none';\r\n      scanBeam.style.opacity='1';\r\n      scanBeam.style.transform='translateY(0)';\r\n      requestAnimationFrame(()=>{\r\n        scanBeam.style.transition='transform 1500ms linear, opacity 300ms ease';\r\n        scanBeam.style.transform='translateY('+bodyH+'px)';\r\n        setTimeout(()=> scanBeam.style.opacity='0', 1300);\r\n      });\r\n    });\r\n\r\n    p.matches.forEach((m,k)=> setTimeout(()=> doMatch(m[0],m[1],m[2]), BASE + k*MGAP));\r\n    p.gaps.forEach((gp,k)=> setTimeout(()=> doGap(gp[0],gp[1]), BASE + p.matches.length*MGAP + k*MGAP));\r\n\r\n    const passDur = BASE + (p.matches.length + p.gaps.length)*MGAP + 550;\r\n    setTimeout(()=>{ if(h) h.classList.remove('lit'); runPass(i+1); }, passDur);\r\n  }\r\n\r\n  function finish(){\r\n    \/* P2-8b: do NOT reveal all 3 here \u2014 keeping only the last section (qual)\r\n       visible is what lets the tile box shrink ~50% (it never needs 3-section\r\n       height). Resolved reading is still complete: qual + all 9 chips locked\r\n       + ATS + add-button on the right. resetAll() restores display for the\r\n       next cycle's runPass(0). *\/\r\n    scanTxt.textContent = '9 matched \u00b7 2 gaps detected';\r\n    setTimeout(()=>{\r\n      rpBadgeTxt.textContent = '9 \/ 11';\r\n      atsFill.style.transition = 'width 1.7s cubic-bezier(0.16,1,0.3,1)';\r\n      animateATS(82, 1700);\r\n    }, 200);\r\n    setTimeout(()=> addBtn.classList.add('show'), 1300);\r\n    setTimeout(()=>{\r\n      if (cycleCount >= MAX_CYCLES) return; \/* settle: all sections shown *\/\r\n      resetAll();\r\n      setTimeout(runLoop, 500);\r\n    }, 3000);\r\n  }\r\n\r\n  setTimeout(()=> runPass(0), 350);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MOBILE \u2014 SPOTLIGHT LOOP\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n\/* Spotlight data \u2014 one entry per match, maps to a live-grid chip id *\/\r\nconst SPOTLIGHT = [\r\n  { sec:'req',  secTxt:'KEY Requirements',\r\n    sentence:'Proficiency in <b class=\"mob-kw-hl skill\">SQL Database<\/b> and Excel Macros for data extraction and modeling',\r\n    cat:'skill', chip:'SQL Database', lcId:'lc-sql' },\r\n  { sec:'req',  secTxt:'KEY Requirements',\r\n    sentence:'Proficiency in SQL Database and <b class=\"mob-kw-hl skill\">Excel Macros<\/b> for data extraction and modeling',\r\n    cat:'skill', chip:'Excel Macros', lcId:'lc-excel' },\r\n  { sec:'req',  secTxt:'KEY Requirements',\r\n    sentence:'Strong <b class=\"mob-kw-hl competency\">analytical thinking<\/b> \u2014 ability to synthesize complex datasets',\r\n    cat:'competency', chip:'Analytical Thinking', lcId:'lc-analytical' },\r\n  { sec:'resp', secTxt:'KEY Responsibilities',\r\n    sentence:'Perform <b class=\"mob-kw-hl skill\">data analysis<\/b> on sales performance across channels',\r\n    cat:'skill', chip:'Data Analysis', lcId:'lc-data' },\r\n  { sec:'resp', secTxt:'KEY Responsibilities',\r\n    sentence:'Partner <b class=\"mob-kw-hl competency\">cross-functional<\/b> with marketing, finance, and retail ops',\r\n    cat:'competency', chip:'Cross-functional', lcId:'lc-cf' },\r\n  { sec:'resp', secTxt:'KEY Responsibilities',\r\n    sentence:'Build <b class=\"mob-kw-hl competency\">strategic<\/b> reporting dashboards to surface KPIs and trends',\r\n    cat:'competency', chip:'Strategic', lcId:'lc-strategic' },\r\n  { sec:'qual', secTxt:'KEY Qualifications',\r\n    sentence:'<b class=\"mob-kw-hl attribute\">Detail-oriented<\/b> with high standards for data accuracy',\r\n    cat:'attribute', chip:'Detail-oriented', lcId:'lc-detail' },\r\n  { sec:'qual', secTxt:'KEY Qualifications',\r\n    sentence:'Demonstrated <b class=\"mob-kw-hl attribute\">adaptability<\/b> in fast-paced, evolving environments',\r\n    cat:'attribute', chip:'Adaptability', lcId:'lc-adapt' },\r\n  { sec:'qual', secTxt:'KEY Qualifications',\r\n    sentence:'Excellent verbal and written <b class=\"mob-kw-hl attribute\">communication<\/b> skills required',\r\n    cat:'attribute', chip:'Communication', lcId:'lc-comm' },\r\n];\r\n\r\nconst GLYPHS2 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_$%#!';\r\nconst rg2 = () => GLYPHS2[Math.floor(Math.random()*GLYPHS2.length)];\r\n\r\nlet mobLoopTimer = null;\r\nlet mobMatchCount = 0; \/* counter shown in .mob-final banner \u2014 increments 01..09 as chips land *\/\r\n\r\n\/* Bump the live counter and reveal the final banner. Called from fireDrop's\r\n   chip-lands callback so the counter advances in lock-step with each chip\r\n   appearing in the live grid. Caps at 9 \u2014 one bump per SPOTLIGHT entry \u2014\r\n   which is also the denominator displayed in the final banner (09\/09). *\/\r\nfunction bumpMatchCounter(){\r\n  if(mobMatchCount >= 9) return; \/* cap at denominator *\/\r\n  mobMatchCount++;\r\n  const countEl = g('mob-final-count');\r\n  if(countEl) countEl.textContent = String(mobMatchCount).padStart(2, '0');\r\n  const finalEl = g('mob-final');\r\n  if(finalEl && !finalEl.classList.contains('visible')) finalEl.classList.add('visible');\r\n}\r\n\r\nfunction mobResetAll(){\r\n  clearTimeout(mobLoopTimer);\r\n\r\n  const card  = g('mob-card');\r\n  const final = g('mob-final');\r\n  const scanT = g('mob-scan-txt');\r\n  const spot  = g('mob-spotlight');\r\n\r\n  if(card)  { card.classList.remove('visible','exit'); }\r\n  if(final) { final.classList.remove('visible'); }\r\n  if(scanT) { scanT.textContent='Ready to analyze'; scanT.classList.remove('hot'); }\r\n  if(spot)  { spot.classList.remove('is-final'); }\r\n\r\n  \/* Reset progress dots *\/\r\n  document.querySelectorAll('.mob-prog-dot').forEach(d=>d.className='mob-prog-dot');\r\n\r\n  \/* Reset live chips *\/\r\n  document.querySelectorAll('.mob-lchip').forEach(c=>c.classList.remove('show'));\r\n\r\n  \/* Reset counter back to 00 for the next cycle *\/\r\n  mobMatchCount = 0;\r\n  const countEl = g('mob-final-count');\r\n  if(countEl) countEl.textContent = '00';\r\n}\r\n\r\n\/* \u2500\u2500 Falling particle: from locked dot \u2192 target column \u2500\u2500 *\/\r\nfunction fireDrop(cat, lcId){\r\n  const spotlight = g('mob-spotlight');\r\n  const srcDot    = g('mob-cat-dot');\r\n  \/* Map cat \u2192 column element *\/\r\n  const colMap = { skill:'col-skill', competency:'col-comp', attribute:'col-attr' };\r\n  const colEl  = spotlight.querySelector('.mob-col.' + colMap[cat]);\r\n  if(!spotlight || !srcDot || !colEl) return;\r\n\r\n  const sr  = spotlight.getBoundingClientRect();\r\n  const dr  = srcDot.getBoundingClientRect();\r\n  const cr  = colEl.getBoundingClientRect();\r\n\r\n  \/* Start: center of the locked dot in the card *\/\r\n  const startX = dr.left + dr.width  \/ 2 - sr.left;\r\n  const startY = dr.top  + dr.height \/ 2 - sr.top;\r\n\r\n  \/* End: center-top of the column header *\/\r\n  const endX = cr.left + cr.width  \/ 2 - sr.left;\r\n  const endY = cr.top  + 12 - sr.top;   \/* 12px into the column header *\/\r\n\r\n  \/* Create particle *\/\r\n  const p = document.createElement('div');\r\n  p.className = `mob-particle ${cat}`;\r\n  p.style.left = startX + 'px';\r\n  p.style.top  = startY + 'px';\r\n  spotlight.appendChild(p);\r\n\r\n  \/* One rAF to let browser paint at start position, then transition to end *\/\r\n  requestAnimationFrame(()=>{\r\n    requestAnimationFrame(()=>{\r\n      p.style.left = endX + 'px';\r\n      p.style.top  = endY + 'px';\r\n    });\r\n  });\r\n\r\n  \/* On arrival: plop the column, fade out particle, show chip *\/\r\n  setTimeout(()=>{\r\n    \/* Column plop *\/\r\n    colEl.classList.add(`plopping-${cat}`);\r\n    setTimeout(()=> colEl.classList.remove(`plopping-${cat}`), 420);\r\n\r\n    \/* Fade particle *\/\r\n    p.style.opacity = '0';\r\n    setTimeout(()=>{ if(p.parentNode) p.parentNode.removeChild(p); }, 220);\r\n\r\n    \/* Drop chip into grid *\/\r\n    const lc = g(lcId);\r\n    if(lc) lc.classList.add('show');\r\n\r\n    \/* Tick the 01\/09 \u2192 09\/09 counter banner in lock-step with the chip\r\n       appearing in the live grid. First call also makes the banner visible. *\/\r\n    bumpMatchCounter();\r\n  }, 540);   \/* matches transition duration 0.52s *\/\r\n}\r\n\r\n\/* Scramble chip text in card then lock *\/\r\nfunction mobLockChip(text, cat){\r\n  const el = g('mob-chip-text');\r\n  if(!el) return;\r\n  const len = text.length;\r\n  let prog = 0;\r\n  const iv = setInterval(()=>{\r\n    let out = '';\r\n    for(let i=0;i<len;i++) out += i<prog ? text[i] : rg2();\r\n    el.textContent = out;\r\n    prog += 0.45;\r\n    if(prog >= len){\r\n      clearInterval(iv);\r\n      el.textContent = text;\r\n      el.className = `mob-chip-text locked-${cat}`;\r\n      const dot = g('mob-cat-dot');\r\n      if(dot) dot.classList.add('locked');\r\n    }\r\n  },38);\r\n}\r\n\r\n\/* Show one spotlight card, drop chip into live grid simultaneously *\/\r\nfunction mobShowCard(idx, onDone){\r\n  const d    = SPOTLIGHT[idx];\r\n  const card = g('mob-card');\r\n  if(!card) return;\r\n\r\n  const badge   = g('mob-sec-badge');\r\n  const sent    = g('mob-sentence');\r\n  const catDot  = g('mob-cat-dot');\r\n  const chipTxt = g('mob-chip-text');\r\n  const catLbl  = g('mob-cat-label');\r\n\r\n  badge.className   = `mob-sec-badge ${d.sec}`;\r\n  badge.textContent = d.secTxt;\r\n  sent.innerHTML    = d.sentence;\r\n  catDot.className  = `mob-cat-dot ${d.cat}`;\r\n  catDot.classList.remove('locked');\r\n  chipTxt.className = 'mob-chip-text';\r\n  chipTxt.textContent = '\u2588'.repeat(d.chip.length > 14 ? 14 : d.chip.length);\r\n  catLbl.className  = `mob-cat-label ${d.cat}`;\r\n  catLbl.textContent = d.cat.charAt(0).toUpperCase()+d.cat.slice(1);\r\n\r\n  \/* Progress dots *\/\r\n  document.querySelectorAll('.mob-prog-dot').forEach((dot,i)=>{\r\n    dot.className = 'mob-prog-dot' + (i<idx ? ' done' : i===idx ? ' active' : '');\r\n  });\r\n\r\n  \/* Reveal card *\/\r\n  card.classList.remove('exit');\r\n  void card.offsetWidth;\r\n  card.classList.add('visible');\r\n\r\n  \/* After 500ms: scramble chip in card + fire particle toward column *\/\r\n  setTimeout(()=>{\r\n    mobLockChip(d.chip, d.cat);\r\n    \/* Short delay so chip is visibly locked before particle fires *\/\r\n    setTimeout(()=> fireDrop(d.cat, d.lcId), 260);\r\n  }, 500);\r\n\r\n  \/* Hold 1.4s then exit *\/\r\n  setTimeout(()=>{\r\n    card.classList.remove('visible');\r\n    card.classList.add('exit');\r\n    setTimeout(onDone, 300);\r\n  }, 1700);\r\n}\r\n\r\nfunction runLoopMobile(){\r\n  mobResetAll();\r\n\r\n  \/* Build progress dots once *\/\r\n  const progEl = g('mob-progress');\r\n  if(progEl && progEl.children.length === 0){\r\n    SPOTLIGHT.forEach(()=>{\r\n      const d = document.createElement('div');\r\n      d.className = 'mob-prog-dot';\r\n      progEl.appendChild(d);\r\n    });\r\n  }\r\n\r\n  const scanT = g('mob-scan-txt');\r\n\r\n  \/* t=400: scan label *\/\r\n  setTimeout(()=>{\r\n    if(scanT){ scanT.classList.add('hot'); scanT.textContent='Extracting skills, competencies, attributes...'; }\r\n  },400);\r\n\r\n  \/* Cycle spotlight cards *\/\r\n  let idx = 0;\r\n  function next(){\r\n    if(idx >= SPOTLIGHT.length){\r\n      showMobFinal();\r\n      return;\r\n    }\r\n    mobShowCard(idx, ()=>{ idx++; setTimeout(next, 80); });\r\n  }\r\n  setTimeout(next, 750);\r\n\r\n  \/* The next-cycle restart is scheduled from inside showMobFinal (below), NOT\r\n     from a fixed delay here, so the new cycle cannot begin until the current\r\n     spotlight chain has fully drained. Previously a fixed 14500ms timer fired\r\n     mid-chain (chain takes ~19500ms for 9 cards), causing the prior cycle's\r\n     in-flight bumpMatchCounter timers to race with the new cycle's chain \u2014 the\r\n     counter would glitch back to 06 and restart, or stutter past 11.\r\n     Tying the restart to chain completion eliminates that overlap. *\/\r\n\r\n  function showMobFinal(){\r\n    const card  = g('mob-card');\r\n    const final = g('mob-final');\r\n    const spot  = g('mob-spotlight');\r\n    if(card)  card.classList.remove('visible','exit');\r\n    if(!final) return;\r\n\r\n    document.querySelectorAll('.mob-prog-dot').forEach(d=>{ d.className='mob-prog-dot done'; });\r\n    if(scanT) scanT.textContent = '9 matched \u00b7 2 gaps detected';\r\n    final.classList.add('visible');\r\n    \/* Switch the live-grid from 3-column row (chain phase) to a single-column\r\n       stack with larger type for the terminal frame. mobResetAll() strips\r\n       'is-final' before the next cycle so the chain layout returns. *\/\r\n    if(spot) spot.classList.add('is-final');\r\n\r\n    \/* Schedule the next cycle ~3.5s after the banner appears (banner-hold so\r\n       the user can read the \"09\/09 matches identified\" terminal state). The\r\n       restart fires only after the spotlight chain has fully drained \u2014\r\n       eliminating the cycle-overlap race that previously caused counter\r\n       glitches. Stored in mobLoopTimer so mobResetAll() can cancel it. *\/\r\n    mobLoopTimer = setTimeout(()=>{\r\n      if (cycleCount >= MAX_CYCLES) return; \/* settle in terminal state *\/\r\n      mobResetAll();\r\n      setTimeout(runLoop, 400);\r\n    }, 3500);\r\n  }\r\n}\r\n\r\n\/* Boot *\/\r\n\r\n\/* \u2500\u2500 Trigger: MutationObserver on aria-hidden + class (JHCarousel.updateNav) \u2500\u2500 *\/\r\nvar ext2Slide = document.getElementById('jhe2_4Bd3me').closest('.jh-it-tile');\r\nvar ext2Running = false;\r\n\r\nfunction ext2Start() {\r\n    if (ext2Running) return;\r\n    ext2Running = true;\r\n    cycleCount = 0; \/* Phase A: reset cycle cap so a scroll-back replays *\/\r\n    resetAll();\r\n    setTimeout(runLoop, 400);\r\n}\r\nfunction ext2Stop() {\r\n    if (!ext2Running) return;\r\n    ext2Running = false;\r\n    resetAll();\r\n}\r\nfunction ext2IsActive() {\r\n    return ext2Slide && ext2Slide.classList.contains('is-focal');\r\n}\r\n\r\nif (ext2Slide) {\r\n    new MutationObserver(function() {\r\n        if (ext2IsActive()) { ext2Start(); } else { ext2Stop(); }\r\n    }).observe(ext2Slide, { attributes: true, attributeFilter: ['class'] });\r\n\r\n    setInterval(function() {\r\n        if (ext2IsActive() && !ext2Running) { ext2Start(); }\r\n        else if (!ext2IsActive() && ext2Running) { ext2Stop(); }\r\n    }, 350);\r\n\r\n    if (ext2IsActive()) ext2Start();\r\n}\r\n                        })();\r\n                        <\/script>\r\n\r\n            <\/div><!-- \/.jh-it-tile-stage -->\r\n            <div class=\"jh-it-tile-copy\">\r\n                <p class=\"jh-it-tile-desc\">ATS software filters resumes on keyword match before a human ever opens yours. We surface every term the listing is scanning for and map it to your real skills, competencies, and outcomes. You confirm what&rsquo;s true &mdash; we route it straight onto your tailored resume.<\/p>\r\n                <ul class=\"jh-it-tile-wins\">\r\n                    <li>Every ATS-tracked keyword the posting is scanning for<\/li>\r\n                    <li>Mapped to your real experience &mdash; never invented<\/li>\r\n                    <li>Tailored resume in one click, no rewriting<\/li>\r\n                <\/ul>\r\n                <span class=\"jh-it-tile-cta\">Decode a posting &rarr;<\/span>\r\n            <\/div>\r\n          <\/div><!-- \/.jh-it-tile-row -->\r\n        <\/a>\r\n\r\n    <\/div><!-- \/.jh-it-grid -->\r\n\r\n<\/section>\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Geist+Mono:wght@400&family=Inter+Tight:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600&display=swap');\r\n\r\n\/* ============================================================================\r\n   Intel Triptych \u2014 section frame, quadrant grid (desktop) + vertical stack\r\n   with title-at-bottom (mobile). Tiles are anchor links to \/features\/.\r\n============================================================================ *\/\r\n\r\n.jh-it-section {\r\n    position: relative;\r\n    box-sizing: border-box;\r\n    width: 100vw;\r\n    margin-left: 50%;\r\n    transform: translateX(-50%);\r\n    padding: 80px 24px;\r\n    background: linear-gradient(to bottom, #0d1117 0%, #07101e 100%);\r\n    color: #fff;\r\n    overflow: hidden;\r\n}\r\n.jh-it-section, .jh-it-section * { box-sizing: border-box; }\r\n\r\n\/* Section header \u2014 centered banner above the demo stack. *\/\r\n.jh-it-section-header {\r\n    max-width: 880px;\r\n    margin: 0 auto 56px;\r\n    text-align: center;\r\n    padding: 0 24px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n}\r\n\r\n.jh-it-grid {\r\n    max-width: 1280px;\r\n    margin: 0 auto;\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    grid-template-rows: auto auto auto;\r\n    grid-template-areas:\r\n        \"insider\"\r\n        \"recruiter\"\r\n        \"decryption\";\r\n    gap: 32px;\r\n}\r\n\r\n.jh-it-tile--insider     { grid-area: insider; }\r\n.jh-it-tile--recruiter   { grid-area: recruiter; }\r\n.jh-it-tile--decryption  { grid-area: decryption; }\r\n\r\n\/* INSIDER tile is denser (5 stacked sub-cards in a narrow brief-panel column,\r\n   text wraps more at half-width than at full-width). Give it more vertical\r\n   room while keeping the other 2 tiles compact at 16\/9. Specificity bumped\r\n   with .jh-it-section parent so this beats the base .jh-it-tile rule that\r\n   comes later in source order. *\/\r\n.jh-it-section .jh-it-tile--insider { aspect-ratio: 16 \/ 11; }\r\n\r\n\/* ----- Tile shell (anchor) \u2014 now 2-col internal grid: demo left, copy right ----- *\/\r\n.jh-it-tile {\r\n    position: relative;\r\n    display: block;\r\n    background: #0a1018;\r\n    border: 1px solid rgba(255, 255, 255, 0.06);\r\n    border-radius: 14px;\r\n    padding: 22px 28px;\r\n    text-decoration: none;\r\n    color: #fff;\r\n    overflow: hidden;\r\n    aspect-ratio: 16 \/ 9;\r\n    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;\r\n}\r\n\r\n.jh-it-tile-row {\r\n    display: grid;\r\n    grid-template-columns: 35% 65%;\r\n    gap: 28px;\r\n    width: 100%;\r\n    height: 100%;\r\n}\r\n\r\n.jh-it-tile-copy {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    padding: 4px 0 4px 28px;\r\n    min-width: 0;\r\n    order: -1;\r\n    justify-content: center;\r\n}\r\n\r\n.jh-it-tile-headline {\r\n    font-family: 'Inter Tight', 'Inter', sans-serif;\r\n    font-size: clamp(20px, 1.65vw, 26px);\r\n    font-weight: 800;\r\n    letter-spacing: -0.02em;\r\n    line-height: 1.18;\r\n    color: rgba(255, 255, 255, 0.95);\r\n    margin: 0;\r\n}\r\n\r\n.jh-it-tile-desc {\r\n    font-family: 'Inter', sans-serif;\r\n    font-size: clamp(13px, 1.05vw, 14.5px);\r\n    line-height: 1.55;\r\n    color: rgba(255, 255, 255, 0.82);\r\n    margin: 0;\r\n}\r\n\r\n.jh-it-tile-wins {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 6px 0 0;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 7px;\r\n}\r\n\r\n\/* Wins read as scannable proof claims \u2014 visually distinct from the explanatory\r\n   prose above (smaller, slightly heavier, brighter). Establishes hierarchy:\r\n   prose = soft\/relaxed, wins = compact\/punchy. *\/\r\n.jh-it-tile-wins li {\r\n    font-family: 'Inter', sans-serif;\r\n    font-size: clamp(12px, 0.95vw, 13.5px);\r\n    font-weight: 500;\r\n    line-height: 1.4;\r\n    color: rgba(255, 255, 255, 0.88);\r\n    padding-left: 24px;\r\n    position: relative;\r\n}\r\n\r\n.jh-it-tile-wins li::before {\r\n    content: '\\2713';\r\n    position: absolute;\r\n    left: 0;\r\n    top: 0;\r\n    font-size: 1.05em;\r\n    color: rgba(96, 176, 255, 0.92);\r\n    font-weight: 800;\r\n}\r\n.jh-it-tile:hover,\r\n.jh-it-tile:focus-visible {\r\n    border-color: rgba(96, 176, 255, 0.45);\r\n    box-shadow: 0 8px 32px rgba(5, 84, 242, 0.18);\r\n    transform: translateY(-2px);\r\n    text-decoration: none;\r\n    color: #fff;\r\n}\r\n\r\n.jh-it-tile-eyebrow {\r\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.16em;\r\n    text-transform: uppercase;\r\n    color: rgba(96, 176, 255, 1);\r\n    margin-bottom: 10px;\r\n    flex-shrink: 0;\r\n    z-index: 2;\r\n}\r\n\r\n.jh-it-tile-stage {\r\n    flex: 1;\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 8px;\r\n    display: flex;\r\n    align-items: stretch;\r\n    justify-content: stretch;\r\n    margin-bottom: 10px;\r\n}\r\n\/* Constrain the lifted .jh-ext-shell-wrap inside each tile-stage *\/\r\n.jh-it-tile-stage > .jh-ext-shell-wrap {\r\n    width: 100%;\r\n    height: 100%;\r\n    display: block;\r\n}\r\n.jh-it-tile-stage > .jh-ext-shell-wrap > .shell {\r\n    width: 100%;\r\n    height: 100%;\r\n    transform-origin: top left;\r\n}\r\n\r\n.jh-it-tile-cta {\r\n    margin-top: auto;\r\n    align-self: flex-start;\r\n    padding-top: 6px;\r\n    font-family: 'Inter Tight', 'Inter', sans-serif;\r\n    font-size: 13px;\r\n    font-weight: 600;\r\n    color: rgba(96, 176, 255, 0.85);\r\n    transition: color 0.18s ease, transform 0.18s ease;\r\n    z-index: 2;\r\n}\r\n.jh-it-tile:hover .jh-it-tile-cta {\r\n    color: #60B0FF;\r\n    transform: translateX(2px);\r\n}\r\n\r\n\/* Title card was removed \u2014 the WHAT THE AI SEES copy now lives in\r\n   .jh-it-section-header above the grid. *\/\r\n.jh-it-eyebrow {\r\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace;\r\n    font-size: 11px;\r\n    font-weight: 600;\r\n    letter-spacing: 0.18em;\r\n    text-transform: uppercase;\r\n    color: rgba(96, 176, 255, 0.85);\r\n    margin-bottom: 18px;\r\n}\r\n.jh-it-headline {\r\n    font-family: 'Inter Tight', 'Inter', sans-serif;\r\n    font-size: clamp(26px, 2.6vw, 38px);\r\n    font-weight: 800;\r\n    letter-spacing: -0.02em;\r\n    line-height: 1.12;\r\n    margin: 0 0 16px;\r\n    color: rgba(255, 255, 255, 0.95);\r\n}\r\n.jh-it-headline-accent { color: #22c55e; }\r\n.jh-it-sub {\r\n    font-family: 'Inter Tight', 'Inter', sans-serif;\r\n    font-size: 14.5px;\r\n    font-weight: 400;\r\n    line-height: 1.55;\r\n    color: rgba(255, 255, 255, 0.6);\r\n    margin: 0 0 22px;\r\n}\r\n.jh-it-section-cta {\r\n    display: inline-flex;\r\n    align-self: center;\r\n    align-items: center;\r\n    padding: 14px 30px;\r\n    background: #ffffff;\r\n    color: #030303;\r\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace;\r\n    font-size: 12.5px;\r\n    font-weight: 700;\r\n    letter-spacing: 0.1em;\r\n    text-decoration: none;\r\n    border-radius: 10px;\r\n    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 24px rgba(255, 255, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);\r\n    transition: box-shadow 0.18s ease, transform 0.12s ease, background 0.18s ease;\r\n}\r\n.jh-it-section-cta:hover {\r\n    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.6), 0 0 32px rgba(255, 255, 255, 0.22);\r\n    transform: translateY(-1px);\r\n    color: #030303;\r\n    text-decoration: none;\r\n}\r\n\r\n\/* ----- Mobile: sticky-stack the 3 demo cards (mirrors jh-features-mobile pattern).\r\n       Header lives above the stack in normal flow. Each tile is position:sticky;\r\n       top:0; height:100svh \u2014 DOM paint order means later siblings cover earlier\r\n       ones as the user scrolls. No JS needed for the stacking effect. ----- *\/\r\n@media (max-width: 720px) {\r\n    .jh-it-section {\r\n        padding: 0;\r\n        background: #030303;\r\n    }\r\n    .jh-it-section-header {\r\n        padding: 56px 20px 32px;\r\n        margin: 0 auto 0;\r\n        text-align: center;\r\n    }\r\n    .jh-it-grid {\r\n        \/* Sticky-stack container: total height = 3 \u00d7 100svh from siblings in normal flow.\r\n           No height\/overflow set \u2014 page scroll drives the stack. *\/\r\n        display: block;\r\n        position: relative;\r\n        grid-template-columns: none;\r\n        grid-template-rows: none;\r\n        grid-template-areas: none;\r\n        gap: 0;\r\n        max-width: none;\r\n        margin: 0;\r\n    }\r\n    .jh-it-tile {\r\n        \/* Tile is now a natural-height block; the .jh-it-tile-stage child\r\n           below is what pins (sticky 100svh). This matches the original\r\n           design intent (\"copy is not sticky; demo below pins\") and gives\r\n           the demo a full viewport instead of viewport-minus-copy. *\/\r\n        position: static;\r\n        top: auto;\r\n        height: auto;\r\n        aspect-ratio: auto !important; \/* override desktop .jh-it-section .jh-it-tile--insider 16\/11 rule (specificity 0,2,0); !important is needed because our selector (.jh-it-tile, 0,1,0) loses without it *\/\r\n        width: 100%;\r\n        max-width: none;\r\n        border-radius: 0;\r\n        border-left: none;\r\n        border-right: none;\r\n        background: #030303;\r\n        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);\r\n        padding: 14px;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    \/* Mobile: copy stacks ABOVE the demo. Copy is in normal flow and scrolls\r\n       naturally; the demo (stage) below becomes position:sticky and pins at\r\n       top:0 for full-viewport visibility. See JS injection below for the\r\n       new properties on .jh-it-tile-stage (top\/height \u2014 would tree-shake\r\n       from inline <style>). *\/\r\n    .jh-it-tile-row {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 14px;\r\n        height: auto;\r\n    }\r\n    .jh-it-tile-copy {\r\n        order: -1;\r\n        gap: 8px;\r\n    }\r\n    .jh-it-tile-headline { font-size: clamp(20px, 5vw, 24px); }\r\n    .jh-it-tile-desc     { font-size: 13.5px; }\r\n    .jh-it-tile-wins li  { font-size: 12.5px; }\r\n    .jh-it-tile-stage {\r\n        flex: none;\r\n        min-height: 0;\r\n    }\r\n    .jh-it-headline { font-size: clamp(22px, 6vw, 28px); }\r\n    .jh-it-sub { font-size: 13.5px; }\r\n    .jh-it-section-cta { padding: 12px 24px; font-size: 11.5px; }\r\n}\r\n\r\n\/* ----- Reduced motion: disable transforms + animation pulses where possible ----- *\/\r\n@media (prefers-reduced-motion: reduce) {\r\n    .jh-it-tile, .jh-it-section-cta, .jh-it-tile-cta {\r\n        transition: none;\r\n    }\r\n}\r\n\r\n\/* ----- Tablet (721\u2013991px) \u2014 give the animation stage more room than the\r\n   default 35\/65 split. Tighten outer tile padding and copy column so the\r\n   inner animation gets ~70% of the tile width. Per-tile internal overrides\r\n   (gap-panel widths, jc-title un-truncation, etc.) live in the second\r\n   <style> block below, scoped to each tile's $ext3_id\/$ext4_id. ----- *\/\r\n@media (min-width: 721px) and (max-width: 991px) {\r\n    .jh-it-tile           { padding: 18px 20px; }\r\n    .jh-it-tile-row       { grid-template-columns: 30% 70%; gap: 18px; }\r\n    .jh-it-tile-copy      { padding: 4px 0 4px 16px; gap: 8px; }\r\n    .jh-it-tile-headline  { font-size: clamp(17px, 2.2vw, 22px); }\r\n    .jh-it-tile-desc      { font-size: clamp(12px, 1.5vw, 13.5px); line-height: 1.5; }\r\n    .jh-it-tile-wins li   { font-size: clamp(11px, 1.3vw, 12.5px); padding-left: 20px; }\r\n    .jh-it-tile-eyebrow   { font-size: 11px; letter-spacing: 0.16em; margin-bottom: 8px; }\r\n    .jh-it-tile-cta       { font-size: 12px; }\r\n}\r\n\r\n<\/style>\r\n\r\n<style>\r\n\/* \u2500\u2500 Slide 04: Extension Demo \u2014 inlined, no iframe \u2500\u2500 *\/\r\n#jh_it_irDSR4 .jh-carousel-slide[data-index=\"0\"] .cell-visual {\r\n    overflow: hidden;\r\n}\r\n#jh_it_irDSR4 .jh-carousel-slide[data-index=\"3\"] .cell-visual {\r\n    overflow: hidden;\r\n}\r\n#jh_it_irDSR4 .jh-ext-shell-wrap {\r\n    flex: 1;\r\n    min-height: 0;\r\n    overflow: hidden;\r\n    display: flex;\r\n    flex-direction: column;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/* \u2500\u2500 Shell \u2500\u2500 *\/\r\n#jhe2_4Bd3me .shell {display:flex;width:100%;height:100%;border-radius:14px;overflow:hidden;position:relative;}\r\n\r\n\r\n\/* SVG connector overlay *\/\r\n#jhe2_4Bd3me #conn-svg {\r\n  position:absolute;inset:0;width:100%;height:100%;\r\n  pointer-events:none;z-index:50;overflow:visible;\r\n}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 JD PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#jhe2_4Bd3me .jd-panel {\r\n  width:56%;flex-shrink:0;\r\n  background:#0f1623;\r\n  display:flex;flex-direction:column;\r\n  border-right:1px solid rgba(255,255,255,0.06);\r\n}\r\n\r\n\r\n\/* Job card header *\/\r\n#jhe2_4Bd3me .jd-header {\r\n  background:#131f32;\r\n  border-bottom:1px solid rgba(255,255,255,0.07);\r\n  padding:14px 18px 13px;\r\n  flex-shrink:0;\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-co-row {\r\n  display:flex;align-items:center;gap:7px;margin-bottom:7px;\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-co-mark {\r\n  width:22px;height:22px;\r\n  background:linear-gradient(135deg,#1a3a6e,#0554F2);\r\n  border-radius:5px;\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-size:7.5px;font-weight:800;color:rgba(255,255,255,0.85);\r\n  letter-spacing:0.02em;flex-shrink:0;\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-co-name {\r\n  font-size:11px;font-weight:500;\r\n  color:rgba(255,255,255,0.45);\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-co-sep {\r\n  width:1px;height:10px;\r\n  background:rgba(255,255,255,0.12);\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-co-loc, #jhe2_4Bd3me .jd-co-sal {\r\n  font-size:10.5px;color:rgba(255,255,255,0.6);\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-title {\r\n  font-size:17px;font-weight:700;\r\n  color:rgba(255,255,255,0.92);\r\n  letter-spacing:-0.02em;\r\n  margin-bottom:8px;line-height:1.2;\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-chips-row {display:flex;gap:5px;margin-bottom:10px;}\r\n\r\n\r\n#jhe2_4Bd3me .jd-chip {\r\n  padding:2px 9px;\r\n  border-radius:4px;\r\n  font-size:9.5px;font-weight:500;\r\n  background:rgba(255,255,255,0.05);\r\n  color:rgba(255,255,255,0.6);\r\n  border:1px solid rgba(255,255,255,0.07);\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-apply {\r\n  display:inline-flex;align-items:center;gap:5px;\r\n  background:#2563EB;\r\n  color:#fff;font-size:11px;font-weight:600;\r\n  padding:5px 14px;border-radius:7px;\r\n  opacity:0.9;cursor:default;\r\n}\r\n\r\n\r\n\/* Scan status bar *\/\r\n#jhe2_4Bd3me .jd-scan-bar {\r\n  padding:5px 18px;\r\n  background:rgba(5,84,242,0.05);\r\n  border-bottom:1px solid rgba(5,84,242,0.1);\r\n  display:flex;align-items:center;gap:7px;\r\n  flex-shrink:0;\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .scan-dot {\r\n  width:5px;height:5px;border-radius:50%;\r\n  background:#0554F2;box-shadow:0 0 5px rgba(5,84,242,0.7);\r\n  animation:jhe2_sdot 1.4s ease-in-out infinite;flex-shrink:0;\r\n}\r\n\r\n@keyframes jhe2_jhe2_sdot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.25;transform:scale(0.55);}}\r\n\r\n\r\n#jhe2_4Bd3me .scan-txt {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7.5px;font-weight:700;letter-spacing:0.14em;\r\n  color:rgba(96,176,255,0.65);text-transform:uppercase;\r\n  transition:color 0.35s;\r\n}\r\n\r\n#jhe2_4Bd3me .scan-txt.hot {color:rgba(96,176,255,0.95);}\r\n\r\n\r\n\/* JD text area *\/\r\n#jhe2_4Bd3me .jd-body {\r\n  flex:1;padding:10px 12px 8px;\r\n  overflow:hidden;position:relative;\r\n}\r\n\r\n\r\n\/* Scan beam *\/\r\n#jhe2_4Bd3me #scan-beam {\r\n  position:absolute;left:0;right:0;top:0;height:2px;\r\n  background:linear-gradient(to right,transparent 0%,rgba(96,176,255,0.65) 15%,rgba(5,84,242,0.9) 50%,rgba(96,176,255,0.65) 85%,transparent 100%);\r\n  box-shadow:0 0 10px rgba(96,176,255,0.25),0 4px 12px rgba(5,84,242,0.12);\r\n  pointer-events:none;opacity:0;z-index:10;\r\n  transform:translateY(0);\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-section {margin-bottom:12px;}\r\n\r\n\r\n#jhe2_4Bd3me .jd-sec-hdr {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:9.5px;font-weight:700;letter-spacing:0.18em;\r\n  text-transform:uppercase;color:#22c55e;\r\n  margin-bottom:7px;padding-bottom:5px;\r\n  border-bottom:1px solid rgba(255,255,255,0.06);\r\n  transition:color 0.35s,border-color 0.35s;\r\n}\r\n\r\n#jhe2_4Bd3me .jd-sec-hdr.lit {\r\n  color:#4ade80;\r\n  border-color:rgba(34,197,94,0.4);\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .jd-list {list-style:none;display:flex;flex-direction:column;gap:5px;}\r\n\r\n#jhe2_4Bd3me .jd-list li {\r\n  display:block;\r\n  font-size:11.5px;color:rgba(255,255,255,0.58);line-height:1.5;\r\n}\r\n\r\n#jhe2_4Bd3me .jd-list li::before {\r\n  content:'';display:none;\r\n}\r\n\r\n\r\n\/* Keywords *\/\r\n#jhe2_4Bd3me .kw {\r\n  display:inline;border-radius:3px;padding:0 2px;\r\n  transition:background 0.22s,color 0.22s,box-shadow 0.22s;\r\n}\r\n\r\n#jhe2_4Bd3me .kw.lit-skill {background:rgba(5,84,242,0.2);color:#7dc3ff;box-shadow:0 0 0 1px rgba(5,84,242,0.45);}\r\n\r\n#jhe2_4Bd3me .kw.lit-competency {background:rgba(99,102,241,0.2);color:#c4b5fd;box-shadow:0 0 0 1px rgba(99,102,241,0.45);}\r\n\r\n#jhe2_4Bd3me .kw.lit-attribute {background:rgba(96,176,255,0.12);color:rgba(150,210,255,0.9);box-shadow:0 0 0 1px rgba(96,176,255,0.35);}\r\n\r\n#jhe2_4Bd3me .kw.lit-gap {background:rgba(245,158,11,0.12);color:#fbbf24;box-shadow:0 0 0 1px rgba(245,158,11,0.38);}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESUME PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#jhe2_4Bd3me .resume-panel {\r\n  flex:1;background:#0d1117;\r\n  display:flex;flex-direction:column;\r\n  overflow:hidden;\r\n}\r\n\r\n\r\n\/* Header *\/\r\n#jhe2_4Bd3me .rp-hdr {\r\n  padding:10px 14px 9px;\r\n  border-bottom:1px solid rgba(255,255,255,0.05);\r\n  display:flex;align-items:center;justify-content:space-between;\r\n  flex-shrink:0;\r\n}\r\n\r\n\r\n#jhe2_4Bd3me .rp-name {font-size:12px;font-weight:800;color:rgba(255,255,255,0.9);letter-spacing:0.01em;}\r\n\r\n#jhe2_4Bd3me .rp-role {font-size:7.5px;font-weight:600;color:#60B0FF;letter-spacing:0.12em;text-transform:uppercase;margin-top:1px;}\r\n\r\n\r\n#jhe2_4Bd3me .rp-badge {\r\n  display:flex;align-items:center;gap:5px;\r\n  background:rgba(5,84,242,0.08);border:1px solid rgba(5,84,242,0.18);\r\n  border-radius:10px;padding:3px 9px;\r\n  transition:background 0.4s,border-color 0.4s;\r\n}\r\n\r\n#jhe2_4Bd3me .rp-badge.active {background:rgba(5,84,242,0.14);border-color:rgba(5,84,242,0.3);}\r\n\r\n#jhe2_4Bd3me .rp-dot {width:4px;height:4px;border-radius:50%;background:#334155;transition:background 0.4s,box-shadow 0.4s;}\r\n\r\n#jhe2_4Bd3me .rp-badge.active .rp-dot {background:#22c55e;box-shadow:0 0 5px rgba(34,197,94,0.6);}\r\n\r\n#jhe2_4Bd3me .rp-badge-txt {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;font-weight:600;letter-spacing:0.14em;\r\n  color:rgba(255,255,255,0.2);text-transform:uppercase;\r\n  transition:color 0.4s;\r\n}\r\n\r\n#jhe2_4Bd3me .rp-badge.active .rp-badge-txt {color:rgba(96,176,255,0.6);}\r\n\r\n\r\n\/* Legend row *\/\r\n#jhe2_4Bd3me .rp-legend {\r\n  display:flex;align-items:center;gap:10px;\r\n  padding:5px 14px 5px;\r\n  border-bottom:1px solid rgba(255,255,255,0.04);\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe2_4Bd3me .leg-item {display:flex;align-items:center;gap:4px;}\r\n\r\n#jhe2_4Bd3me .leg-dot {width:6px;height:6px;border-radius:50%;flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .leg-dot.skill {background:#0554F2;box-shadow:0 0 4px rgba(5,84,242,0.6);}\r\n\r\n#jhe2_4Bd3me .leg-dot.comp {background:#6366F1;box-shadow:0 0 4px rgba(99,102,241,0.5);}\r\n\r\n#jhe2_4Bd3me .leg-dot.attr {background:rgba(96,176,255,0.7);}\r\n\r\n#jhe2_4Bd3me .leg-txt {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:7px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;}\r\n\r\n#jhe2_4Bd3me .leg-item:nth-child(1) .leg-txt {color:#60B0FF;}\r\n\r\n#jhe2_4Bd3me .leg-item:nth-child(2) .leg-txt {color:#a5b4fc;}\r\n\r\n#jhe2_4Bd3me .leg-item:nth-child(3) .leg-txt {color:rgba(150,210,255,0.85);}\r\n\r\n\r\n\/* Chip columns *\/\r\n#jhe2_4Bd3me .chip-cols {\r\n  display:flex;gap:0;\r\n  border-bottom:1px solid rgba(255,255,255,0.05);\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe2_4Bd3me .chip-col {\r\n  flex:1;padding:9px 10px;\r\n  border-right:1px solid rgba(255,255,255,0.04);\r\n}\r\n\r\n#jhe2_4Bd3me .chip-col:last-child {border-right:none;}\r\n\r\n\r\n#jhe2_4Bd3me .cc-hdr {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;font-weight:600;letter-spacing:0.18em;\r\n  text-transform:uppercase;margin-bottom:7px;\r\n  padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,0.04);\r\n}\r\n\r\n#jhe2_4Bd3me .chip-col.col-skill .cc-hdr {color:rgba(96,176,255,0.5);}\r\n\r\n#jhe2_4Bd3me .chip-col.col-comp .cc-hdr {color:rgba(165,180,252,0.5);}\r\n\r\n#jhe2_4Bd3me .chip-col.col-attr .cc-hdr {color:rgba(96,176,255,0.4);}\r\n\r\n\r\n#jhe2_4Bd3me .chip-list {display:flex;flex-direction:column;gap:4px;}\r\n\r\n\r\n#jhe2_4Bd3me .chip {\r\n  display:block;width:100%;\r\n  padding:3px 7px;border-radius:4px;\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:8px;font-weight:500;letter-spacing:0.03em;\r\n  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;\r\n  transition:background 0.3s,border-color 0.3s,color 0.3s,box-shadow 0.3s;\r\n  background:rgba(255,255,255,0.03);\r\n  border:1px solid rgba(255,255,255,0.05);\r\n  color:rgba(255,255,255,0.08);\r\n}\r\n\r\n#jhe2_4Bd3me .chip.locked-skill {background:rgba(5,84,242,0.12);border-color:rgba(5,84,242,0.42);color:#7dc3ff;box-shadow:0 0 7px rgba(5,84,242,0.1);}\r\n\r\n#jhe2_4Bd3me .chip.locked-competency {background:rgba(99,102,241,0.12);border-color:rgba(99,102,241,0.42);color:#c4b5fd;box-shadow:0 0 7px rgba(99,102,241,0.09);}\r\n\r\n#jhe2_4Bd3me .chip.locked-attribute {background:rgba(96,176,255,0.08);border-color:rgba(96,176,255,0.32);color:rgba(150,210,255,0.85);}\r\n\r\n\r\n\/* ATS score *\/\r\n#jhe2_4Bd3me .ats-sec {\r\n  padding:9px 14px 8px;\r\n  border-bottom:1px solid rgba(255,255,255,0.04);\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe2_4Bd3me .ats-row {display:flex;align-items:center;gap:8px;margin-bottom:4px;}\r\n\r\n#jhe2_4Bd3me .ats-lbl {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;font-weight:600;letter-spacing:0.16em;\r\n  color:rgba(255,255,255,0.25);text-transform:uppercase;flex-shrink:0;\r\n}\r\n\r\n#jhe2_4Bd3me .ats-track {flex:1;height:3px;background:rgba(255,255,255,0.06);border-radius:2px;overflow:hidden;}\r\n\r\n#jhe2_4Bd3me .ats-fill {\r\n  height:100%;width:0%;\r\n  background:linear-gradient(90deg,#0554F2,#60B0FF);\r\n  border-radius:2px;box-shadow:0 0 5px rgba(5,84,242,0.35);\r\n  transition:width 1.7s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n\r\n#jhe2_4Bd3me .ats-pct {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:24px;font-weight:800;color:#60B0FF;\r\n  line-height:1;text-shadow:0 0 14px rgba(96,176,255,0.55);\r\n  min-width:48px;text-align:right;flex-shrink:0;\r\n}\r\n\r\n#jhe2_4Bd3me .ats-sub {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;letter-spacing:0.08em;color:rgba(255,255,255,0.18);\r\n}\r\n\r\n\r\n\/* Gaps *\/\r\n#jhe2_4Bd3me .gap-sec {padding:7px 14px 8px;flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .gap-hdr {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;font-weight:600;letter-spacing:0.18em;\r\n  color:rgba(245,158,11,0.4);text-transform:uppercase;margin-bottom:6px;\r\n}\r\n\r\n#jhe2_4Bd3me .gap-list {display:flex;gap:5px;flex-wrap:wrap;}\r\n\r\n#jhe2_4Bd3me .gap-chip {\r\n  padding:3px 9px;border-radius:4px;\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:8px;font-weight:500;letter-spacing:0.04em;\r\n  background:rgba(245,158,11,0.07);border:1px solid rgba(245,158,11,0.22);\r\n  color:#fbbf24;\r\n  opacity:0;transform:translateY(5px);\r\n  transition:opacity 0.35s ease,transform 0.35s ease;\r\n}\r\n\r\n#jhe2_4Bd3me .gap-chip.show {opacity:1;transform:translateY(0);}\r\n\r\n\r\n\/* Add button *\/\r\n#jhe2_4Bd3me .add-wrap {padding:7px 14px 10px;flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .add-btn {\r\n  width:100%;height:34px;\r\n  background:linear-gradient(180deg,#2563EB,#1D4ED8);\r\n  border:none;border-radius:7px;color:#fff;\r\n  font-family:'Inter',sans-serif;\r\n  font-size:11.5px;font-weight:700;letter-spacing:0.01em;\r\n  box-shadow:0 4px 16px rgba(37,99,235,0.35);\r\n  cursor:default;\r\n  opacity:0;transform:translateY(5px);\r\n  transition:opacity 0.45s ease,transform 0.45s ease;\r\n}\r\n\r\n#jhe2_4Bd3me .add-btn.show {opacity:1;transform:translateY(0);}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 MOBILE \u2014 OPTION 3 SPOTLIGHT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media(max-width:720px){\r\n  \/* Shell completely hidden on mobile \u2014 spotlight takes over *\/\r\n  #jhe2_4Bd3me .shell {display:none;}\r\n  #jhe2_4Bd3me #mob-spotlight {display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;background:#0d1117;}\r\n}\r\n\r\n@media(min-width:721px){\r\n  #jhe2_4Bd3me #mob-spotlight {display:none;}\r\n\r\n}\r\n\r\n\r\n\/* \u2500\u2500 Persistent job header \u2500\u2500 *\/\r\n#jhe2_4Bd3me .mob-jd-hdr {background:#131f32;border-bottom:1px solid rgba(255,255,255,0.07);padding:10px 16px 9px;flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .mob-jd-co-row {display:flex;align-items:center;gap:7px;margin-bottom:4px;}\r\n\r\n#jhe2_4Bd3me .mob-jd-mark {width:22px;height:22px;background:linear-gradient(135deg,#1a3a6e,#0554F2);border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:7.5px;font-weight:800;color:rgba(255,255,255,0.85);flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .mob-jd-co {font-size:10.5px;font-weight:500;color:rgba(255,255,255,0.4);}\r\n\r\n#jhe2_4Bd3me .mob-jd-sep {width:1px;height:9px;background:rgba(255,255,255,0.1);}\r\n\r\n#jhe2_4Bd3me .mob-jd-sal {font-size:10px;color:rgba(255,255,255,0.3);}\r\n\r\n#jhe2_4Bd3me .mob-jd-title {font-size:15px;font-weight:700;color:rgba(255,255,255,0.9);letter-spacing:-0.02em;}\r\n\r\n\r\n\/* \u2500\u2500 Scan bar \u2500\u2500 *\/\r\n#jhe2_4Bd3me .mob-scan-bar {padding:4px 16px;background:rgba(5,84,242,0.05);border-bottom:1px solid rgba(5,84,242,0.1);display:flex;align-items:center;gap:7px;flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .mob-scan-txt {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:7.5px;font-weight:700;letter-spacing:0.12em;color:rgba(96,176,255,0.5);text-transform:uppercase;transition:color 0.3s;}\r\n\r\n#jhe2_4Bd3me .mob-scan-txt.hot {color:rgba(96,176,255,0.9);}\r\n\r\n\r\n\/* \u2500\u2500 Stage: top card + bottom grid, no centering \u2500\u2500 *\/\r\n#jhe2_4Bd3me .mob-stage {\r\n  flex:1;\r\n  display:flex;flex-direction:column;\r\n  padding:10px 14px 6px;\r\n  gap:8px;\r\n  overflow:hidden;\r\n  min-height:0;\r\n}\r\n\r\n\r\n\/* \u2500\u2500 Spotlight card (top, fixed height so grid doesn't jump) \u2500\u2500 *\/\r\n#jhe2_4Bd3me .mob-card {\r\n  flex-shrink:0;\r\n  min-height:148px;\r\n  background:#111827;border:1px solid rgba(255,255,255,0.08);\r\n  border-radius:12px;padding:12px 14px 11px;\r\n  display:flex;flex-direction:column;gap:9px;\r\n  opacity:0;transform:translateY(8px);\r\n  transition:opacity 0.32s ease,transform 0.32s ease;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-card.visible {opacity:1;transform:translateY(0);}\r\n\r\n#jhe2_4Bd3me .mob-card.exit {opacity:0;transform:translateY(-8px);}\r\n\r\n\r\n\/* Section badge *\/\r\n#jhe2_4Bd3me .mob-sec-badge {display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-family:'Geist Mono','JetBrains Mono',monospace;font-size:7px;font-weight:700;letter-spacing:0.18em;text-transform:uppercase;align-self:flex-start;}\r\n\r\n#jhe2_4Bd3me .mob-sec-badge.req {background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.25);}\r\n\r\n#jhe2_4Bd3me .mob-sec-badge.resp {background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.25);}\r\n\r\n#jhe2_4Bd3me .mob-sec-badge.qual {background:rgba(34,197,94,0.1);color:#22c55e;border:1px solid rgba(34,197,94,0.25);}\r\n\r\n\r\n\/* JD sentence *\/\r\n#jhe2_4Bd3me .mob-sentence {font-size:13px;color:rgba(255,255,255,0.55);line-height:1.55;}\r\n\r\n#jhe2_4Bd3me .mob-kw-hl {border-radius:3px;padding:0 3px;font-weight:600;}\r\n\r\n#jhe2_4Bd3me .mob-kw-hl.skill {background:rgba(5,84,242,0.22);color:#7dc3ff;box-shadow:0 0 0 1px rgba(5,84,242,0.45);}\r\n\r\n#jhe2_4Bd3me .mob-kw-hl.competency {background:rgba(99,102,241,0.22);color:#c4b5fd;box-shadow:0 0 0 1px rgba(99,102,241,0.45);}\r\n\r\n#jhe2_4Bd3me .mob-kw-hl.attribute {background:rgba(96,176,255,0.13);color:rgba(150,210,255,0.9);box-shadow:0 0 0 1px rgba(96,176,255,0.35);}\r\n\r\n\r\n\/* Arrow *\/\r\n#jhe2_4Bd3me .mob-arrow {display:flex;flex-direction:column;align-items:center;gap:0;}\r\n\r\n#jhe2_4Bd3me .mob-arrow-line {width:1px;height:14px;background:linear-gradient(to bottom,rgba(96,176,255,0.0),rgba(96,176,255,0.45));}\r\n\r\n#jhe2_4Bd3me .mob-arrow-head {font-size:9px;color:rgba(96,176,255,0.45);margin-top:-1px;}\r\n\r\n\r\n\/* Chip reveal bar inside card *\/\r\n#jhe2_4Bd3me .mob-chip-row {display:flex;align-items:center;gap:8px;padding:8px 10px;background:rgba(255,255,255,0.025);border-radius:7px;border:1px solid rgba(255,255,255,0.04);}\r\n\r\n#jhe2_4Bd3me .mob-cat-dot {width:7px;height:7px;border-radius:50%;flex-shrink:0;transition:box-shadow 0.3s;}\r\n\r\n#jhe2_4Bd3me .mob-cat-dot.skill {background:#0554F2;}\r\n\r\n#jhe2_4Bd3me .mob-cat-dot.competency {background:#6366F1;}\r\n\r\n#jhe2_4Bd3me .mob-cat-dot.attribute {background:rgba(96,176,255,0.7);}\r\n\r\n#jhe2_4Bd3me .mob-cat-dot.locked {box-shadow:0 0 7px currentColor;}\r\n\r\n#jhe2_4Bd3me .mob-chip-text {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:10.5px;font-weight:600;letter-spacing:0.03em;color:rgba(255,255,255,0.12);flex:1;transition:color 0.3s;}\r\n\r\n#jhe2_4Bd3me .mob-chip-text.locked-skill {color:#7dc3ff;}\r\n\r\n#jhe2_4Bd3me .mob-chip-text.locked-competency {color:#c4b5fd;}\r\n\r\n#jhe2_4Bd3me .mob-chip-text.locked-attribute {color:rgba(150,210,255,0.85);}\r\n\r\n#jhe2_4Bd3me .mob-cat-label {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:7px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.15);transition:color 0.3s;flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .mob-cat-label.skill {color:rgba(96,176,255,0.65);}\r\n\r\n#jhe2_4Bd3me .mob-cat-label.competency {color:rgba(165,180,252,0.65);}\r\n\r\n#jhe2_4Bd3me .mob-cat-label.attribute {color:rgba(150,210,255,0.55);}\r\n\r\n\r\n\/* \u2500\u2500 Final \/ counter badge (slim banner that sits beneath the spotlight\r\n       card and increments 01\/09 \u2192 09\/09 as chips land) \u2500\u2500 *\/\r\n#jhe2_4Bd3me .mob-final {\r\n  flex-shrink:0;\r\n  min-height:auto;\r\n  display:flex;align-items:center;justify-content:center;\r\n  opacity:0;transform:translateY(8px);\r\n  transition:opacity 0.38s ease,transform 0.38s ease;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-final.visible {opacity:1;transform:translateY(0);}\r\n\r\n#jhe2_4Bd3me .mob-final-badge {\r\n  display:inline-flex;align-items:center;gap:8px;\r\n  background:rgba(34,197,94,0.08);\r\n  border:1px solid rgba(34,197,94,0.25);\r\n  border-radius:20px;padding:8px 18px;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-final-dot {\r\n  width:7px;height:7px;border-radius:50%;\r\n  background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,0.6);\r\n  animation:jhe2_sdot 2s ease-in-out infinite;flex-shrink:0;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-final-txt {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:9px;font-weight:700;letter-spacing:0.14em;\r\n  color:rgba(34,197,94,0.8);text-transform:uppercase;\r\n}\r\n\r\n\r\n\/* \u2500\u2500 Live chip grid (persistent, chips drop in as matched) \u2500\u2500 *\/\r\n#jhe2_4Bd3me .mob-live-grid {\r\n  flex:1;\r\n  display:grid;\r\n  grid-template-columns:1fr 1fr 1fr;\r\n  gap:8px;\r\n  min-height:0;\r\n  align-content:start;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-col {\r\n  background:#111827;border:1px solid rgba(255,255,255,0.06);\r\n  border-radius:9px;padding:9px 8px;\r\n  display:flex;flex-direction:column;gap:5px;\r\n  min-height:0;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-col-hdr {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:9px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;margin-bottom:4px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,0.05);}\r\n\r\n#jhe2_4Bd3me .mob-col.col-skill   .mob-col-hdr {color:rgba(96,176,255,0.65);}\r\n\r\n#jhe2_4Bd3me .mob-col.col-comp    .mob-col-hdr {color:rgba(165,180,252,0.65);}\r\n\r\n#jhe2_4Bd3me .mob-col.col-attr    .mob-col-hdr {color:rgba(150,210,255,0.55);}\r\n\r\n#jhe2_4Bd3me .mob-lchip {\r\n  padding:4px 6px;border-radius:4px;\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7.5px;font-weight:500;\r\n  line-height:1.3;\r\n  word-break:break-word;\r\n  opacity:0;transform:translateY(-5px);\r\n  transition:opacity 0.3s ease,transform 0.3s ease;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-lchip.show {opacity:1;transform:translateY(0);}\r\n\r\n#jhe2_4Bd3me .mob-lchip.skill {background:rgba(5,84,242,0.12);border:1px solid rgba(5,84,242,0.38);color:#7dc3ff;}\r\n\r\n#jhe2_4Bd3me .mob-lchip.competency {background:rgba(99,102,241,0.12);border:1px solid rgba(99,102,241,0.38);color:#c4b5fd;}\r\n\r\n#jhe2_4Bd3me .mob-lchip.attribute {background:rgba(96,176,255,0.08);border:1px solid rgba(96,176,255,0.28);color:rgba(150,210,255,0.85);}\r\n\r\n\r\n\/* \u2500\u2500 Final-frame layout \u2500\u2500\r\n   Applied via .is-final on #mob-spotlight when showMobFinal runs. The chain\r\n   animation keeps the base 3-column row; on the terminal frame the cards\r\n   restack vertically and grow into the spotlight card's freed space at\r\n   larger type. mobResetAll() strips the class so the next cycle replays\r\n   in the row layout. *\/\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-card {display:none;}\r\n\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-live-grid {\r\n  display:flex;\r\n  flex-direction:column;\r\n  gap:10px;\r\n}\r\n\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-col {\r\n  flex:1;\r\n  padding:11px 14px;\r\n  border-radius:10px;\r\n  display:flex;flex-direction:row;flex-wrap:wrap;\r\n  gap:8px 10px;\r\n  align-content:flex-start;\r\n  align-items:center;\r\n  justify-content:flex-start;\r\n}\r\n\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-col-hdr {\r\n  width:100%;\r\n  font-size:13px;\r\n  text-align:center;\r\n  margin-bottom:0;\r\n  padding-bottom:6px;\r\n}\r\n\r\n\/* Final-frame header colors \u2014 match the chip text tones for legibility\r\n   (the chain-phase headers stay muted; these only apply when is-final). *\/\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-col.col-skill .mob-col-hdr {color:#7dc3ff;}\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-col.col-comp  .mob-col-hdr {color:#c4b5fd;}\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-col.col-attr  .mob-col-hdr {color:rgba(170,225,255,0.95);}\r\n\r\n#jhe2_4Bd3me #mob-spotlight.is-final .mob-lchip {\r\n  padding:7px 12px;\r\n  border-radius:6px;\r\n  font-size:12.5px;\r\n  white-space:nowrap;\r\n}\r\n\r\n\r\n\/* \u2500\u2500 Progress dots \u2500\u2500 *\/\r\n#jhe2_4Bd3me .mob-progress {display:none;align-items:center;justify-content:center;gap:6px;padding:7px 0 8px;flex-shrink:0;}\r\n\r\n#jhe2_4Bd3me .mob-prog-dot {width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,0.1);transition:background 0.3s,transform 0.3s,box-shadow 0.3s;}\r\n\r\n#jhe2_4Bd3me .mob-prog-dot.done {background:rgba(96,176,255,0.35);}\r\n\r\n#jhe2_4Bd3me .mob-prog-dot.active {background:#60B0FF;transform:scale(1.4);box-shadow:0 0 6px rgba(96,176,255,0.5);}\r\n\r\n\r\n\/* \u2500\u2500 Falling particle \u2500\u2500 *\/\r\n#jhe2_4Bd3me #mob-spotlight {position:relative;}\r\n\r\n#jhe2_4Bd3me .mob-particle {\r\n  position:absolute;\r\n  width:9px;height:9px;\r\n  border-radius:50%;\r\n  pointer-events:none;\r\n  z-index:200;\r\n  \/* transform keeps the hotspot at center of dot *\/\r\n  margin:-4.5px 0 0 -4.5px;\r\n  transition:top 0.52s cubic-bezier(0.4,0.8,0.6,1), left 0.52s cubic-bezier(0.4,0.8,0.6,1), opacity 0.18s ease;\r\n}\r\n\r\n#jhe2_4Bd3me .mob-particle.skill {background:#0554F2;box-shadow:0 0 8px rgba(5,84,242,0.8);}\r\n\r\n#jhe2_4Bd3me .mob-particle.competency {background:#6366F1;box-shadow:0 0 8px rgba(99,102,241,0.8);}\r\n\r\n#jhe2_4Bd3me .mob-particle.attribute {background:rgba(96,176,255,0.85);box-shadow:0 0 8px rgba(96,176,255,0.65);}\r\n\r\n\r\n\/* \u2500\u2500 Column header plop flash \u2500\u2500 *\/\r\n@keyframes jhe2_jhe2_mob-plop{\r\n  0%  {transform:scale(1);}\r\n  35% {transform:scale(1.18);}\r\n  55% {transform:scale(0.92);}\r\n  100%{transform:scale(1);}\r\n}\r\n\r\n@keyframes jhe2_mob-plop-glow-skill     {0%,100%{box-shadow:none;}40%{box-shadow:0 0 0 3px rgba(5,84,242,0.35),inset 0 0 8px rgba(5,84,242,0.15);}}\r\n\r\n@keyframes jhe2_jhe2_mob-plop-glow-competency{0%,100%{box-shadow:none;}40%{box-shadow:0 0 0 3px rgba(99,102,241,0.35),inset 0 0 8px rgba(99,102,241,0.15);}}\r\n\r\n@keyframes jhe2_jhe2_mob-plop-glow-attribute {0%,100%{box-shadow:none;}40%{box-shadow:0 0 0 3px rgba(96,176,255,0.28),inset 0 0 8px rgba(96,176,255,0.1);}}\r\n\r\n#jhe2_4Bd3me .mob-col.plopping-skill {animation:jhe2_mob-plop 0.38s ease-out,jhe2_mob-plop-glow-skill      0.38s ease-out;}\r\n\r\n#jhe2_4Bd3me .mob-col.plopping-competency {animation:jhe2_mob-plop 0.38s ease-out,jhe2_mob-plop-glow-competency 0.38s ease-out;}\r\n\r\n#jhe2_4Bd3me .mob-col.plopping-attribute {animation:jhe2_mob-plop 0.38s ease-out,jhe2_mob-plop-glow-attribute  0.38s ease-out;}\r\n\r\n\/* \u2500\u2500 Slide 02: Match Engine \u2014 inlined \u2500\u2500 *\/\r\n#jh_it_irDSR4 .jh-carousel-slide[data-index=\"2\"] .cell-visual {\r\n    overflow: hidden;\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/* \u2550\u2550 SHELL \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .shell {display:flex;width:100%;height:100%;border-radius:14px;overflow:hidden;position:relative;}\r\n\r\n\r\n\/* \u2550\u2550 JOB HEADER BAR \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .job-bar {\r\n  position:absolute;top:0;left:0;right:0;z-index:10;\r\n  background:#0d1520;\r\n  border-bottom:1px solid rgba(255,255,255,0.07);\r\n  padding:8px 18px;\r\n  display:flex;align-items:center;gap:10px;\r\n  flex-shrink:0;height:44px;\r\n}\r\n\r\n#jhe3_ZMPTdU .jb-title {font-size:13px;font-weight:700;color:rgba(255,255,255,0.9);letter-spacing:-0.01em;white-space:nowrap;}\r\n\r\n#jhe3_ZMPTdU .jb-sep {width:1px;height:12px;background:rgba(255,255,255,0.1);flex-shrink:0;}\r\n\r\n#jhe3_ZMPTdU .jb-co {font-size:11px;color:rgba(255,255,255,0.6);white-space:nowrap;}\r\n\r\n#jhe3_ZMPTdU .jb-sal {font-size:11px;color:rgba(255,255,255,0.3);white-space:nowrap;}\r\n\r\n#jhe3_ZMPTdU .jb-loc {font-size:11px;color:rgba(255,255,255,0.3);white-space:nowrap;}\r\n\r\n\r\n#jhe3_ZMPTdU .jb-actions {margin-left:auto;display:flex;gap:8px;align-items:center;flex-shrink:0;}\r\n\r\n#jhe3_ZMPTdU .jb-btn {\r\n  padding:5px 13px;border-radius:7px;\r\n  font-size:10px;font-weight:600;letter-spacing:0.02em;cursor:default;\r\n  border:1px solid rgba(255,255,255,0.1);\r\n  background:rgba(255,255,255,0.04);\r\n  color:rgba(255,255,255,0.45);\r\n  display:flex;align-items:center;gap:5px;white-space:nowrap;\r\n}\r\n\r\n#jhe3_ZMPTdU .jb-btn-primary {\r\n  background:linear-gradient(135deg,#0554F2,#3B82F6);\r\n  border-color:transparent;color:#fff;\r\n  box-shadow:0 2px 14px rgba(5,84,242,0.42);\r\n  font-size:11px;padding:6px 16px;\r\n}\r\n\r\n#jhe3_ZMPTdU .jb-btn-active {\r\n  border-color:rgba(5,84,242,0.5);color:rgba(96,176,255,0.9);\r\n  background:rgba(5,84,242,0.1);font-size:11px;padding:6px 14px;\r\n}\r\n\r\n\r\n\/* \u2550\u2550 MAIN CONTENT (below bar) \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .main {\r\n  display:flex;width:100%;height:100%;\r\n  padding-top:44px;\r\n}\r\n\r\n\r\n\/* \u2550\u2550 LEFT \u2014 GAP LIST \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .gap-panel {\r\n  width:42%;flex-shrink:0;\r\n  background:#0b1221;\r\n  border-right:1px solid rgba(255,255,255,0.06);\r\n  display:flex;flex-direction:column;\r\n  overflow:hidden;\r\n}\r\n\r\n\r\n#jhe3_ZMPTdU .gap-panel-hdr {\r\n  padding:12px 18px 10px;\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe3_ZMPTdU .gph-eyebrow {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;font-weight:600;letter-spacing:0.22em;\r\n  color:rgba(96,176,255,0.45);text-transform:uppercase;\r\n  margin-bottom:4px;\r\n}\r\n\r\n#jhe3_ZMPTdU .gph-title {font-size:16px;font-weight:800;color:#22c55e;letter-spacing:-0.02em;margin-bottom:2px;}\r\n\r\n#jhe3_ZMPTdU .gph-sub {font-size:10.5px;font-style:italic;color:rgba(255,255,255,0.3);line-height:1.4;}\r\n\r\n\r\n#jhe3_ZMPTdU .gap-divider {height:1px;background:rgba(255,255,255,0.05);margin:0 18px;}\r\n\r\n\r\n#jhe3_ZMPTdU .gap-list {flex:1;overflow:hidden;padding:8px 14px;}\r\n\r\n\r\n#jhe3_ZMPTdU .gap-section-hdr {\r\n  font-size:11px;font-weight:700;color:rgba(255,255,255,0.65);\r\n  letter-spacing:-0.01em;margin:6px 0 6px;\r\n}\r\n\r\n\r\n\/* Gap row *\/\r\n#jhe3_ZMPTdU .gap-row {\r\n  display:flex;align-items:flex-start;gap:7px;\r\n  padding:7px 9px;border-radius:7px;\r\n  margin-bottom:4px;\r\n  background:rgba(255,255,255,0.02);\r\n  border:1px solid rgba(255,255,255,0.04);\r\n  cursor:default;\r\n  transition:background 0.25s,border-color 0.25s;\r\n  position:relative;\r\n}\r\n\r\n#jhe3_ZMPTdU .gap-row.highlighted {\r\n  background:rgba(5,84,242,0.07);\r\n  border-color:rgba(5,84,242,0.25);\r\n}\r\n\r\n#jhe3_ZMPTdU .gap-row.matched {\r\n  background:rgba(34,197,94,0.06);\r\n  border-color:rgba(34,197,94,0.2);\r\n}\r\n\r\n\r\n\/* Plus \/ check button *\/\r\n#jhe3_ZMPTdU .gap-plus {\r\n  width:20px;height:20px;border-radius:5px;\r\n  background:rgba(5,84,242,0.12);\r\n  border:1px solid rgba(5,84,242,0.25);\r\n  display:flex;align-items:center;justify-content:center;\r\n  flex-shrink:0;margin-top:1px;\r\n  transition:background 0.25s,border-color 0.25s,transform 0.15s;\r\n  font-size:12px;color:#60B0FF;\r\n  font-weight:300;line-height:1;\r\n}\r\n\r\n#jhe3_ZMPTdU .gap-row.matched .gap-plus {\r\n  background:rgba(34,197,94,0.15);\r\n  border-color:rgba(34,197,94,0.35);\r\n  color:#22c55e;\r\n}\r\n\r\n\r\n\/* Color square *\/\r\n#jhe3_ZMPTdU .gap-sq {\r\n  width:12px;height:12px;border-radius:3px;\r\n  flex-shrink:0;margin-top:4px;\r\n  transition:background 0.35s;\r\n}\r\n\r\n#jhe3_ZMPTdU .gap-sq.amber {background:#F59E0B;}\r\n\r\n#jhe3_ZMPTdU .gap-sq.red {background:#ef4444;}\r\n\r\n#jhe3_ZMPTdU .gap-sq.green {background:#22c55e;}\r\n\r\n\r\n\/* Requirement text *\/\r\n#jhe3_ZMPTdU .gap-txt {font-size:10.5px;color:rgba(255,255,255,0.55);line-height:1.45;flex:1;}\r\n\r\n#jhe3_ZMPTdU .gap-row.matched .gap-txt {color:rgba(255,255,255,0.45);}\r\n\r\n\r\n\/* Matched badge *\/\r\n#jhe3_ZMPTdU .gap-matched-badge {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;font-weight:700;letter-spacing:0.14em;\r\n  color:rgba(34,197,94,0.7);text-transform:uppercase;\r\n  padding:2px 6px;border-radius:3px;\r\n  background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.18);\r\n  flex-shrink:0;margin-top:3px;\r\n  opacity:0;transition:opacity 0.4s ease;\r\n  white-space:nowrap;\r\n}\r\n\r\n#jhe3_ZMPTdU .gap-row.matched .gap-matched-badge {opacity:1;}\r\n\r\n\r\n\/* \u2550\u2550 RIGHT \u2014 DETAIL PANEL \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .detail-panel {\r\n  flex:1;background:#0d1117;\r\n  display:flex;flex-direction:column;\r\n  transform:translateX(100%);\r\n  transition:transform 0.42s cubic-bezier(0.4,0,0.2,1);\r\n  overflow:hidden;\r\n  position:relative;\r\n}\r\n\r\n#jhe3_ZMPTdU .detail-panel.open {transform:translateX(0);}\r\n\r\n\r\n\/* Detail header *\/\r\n#jhe3_ZMPTdU .dp-hdr {\r\n  padding:14px 20px 12px;\r\n  border-bottom:1px solid rgba(255,255,255,0.05);\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe3_ZMPTdU .dp-eyebrow {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:7px;font-weight:700;letter-spacing:0.2em;\r\n  color:rgba(245,158,11,0.65);text-transform:uppercase;\r\n  margin-bottom:5px;\r\n  display:flex;align-items:center;gap:6px;\r\n}\r\n\r\n#jhe3_ZMPTdU .dp-eyebrow::before {\r\n  content:'';width:5px;height:5px;border-radius:50%;\r\n  background:#F59E0B;box-shadow:0 0 5px rgba(245,158,11,0.6);flex-shrink:0;\r\n  animation:jhe3_pdot2 2s ease-in-out infinite;\r\n}\r\n\r\n@keyframes jhe3_jhe3_pdot2{0%,100%{opacity:1;}50%{opacity:0.3;}}\r\n\r\n#jhe3_ZMPTdU .dp-req-txt {font-size:13px;font-weight:600;color:rgba(255,255,255,0.85);line-height:1.5;}\r\n\r\n\r\n\/* Where section *\/\r\n#jhe3_ZMPTdU .dp-where {\r\n  padding:8px 20px 6px;\r\n  flex:1;overflow-y:auto;scrollbar-width:none;\r\n  display:flex;flex-direction:column;\r\n  gap:0;\r\n}\r\n\r\n#jhe3_ZMPTdU .dp-where::-webkit-scrollbar {display:none;}\r\n\r\n\r\n#jhe3_ZMPTdU .dp-where-lbl {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:11px;font-weight:700;letter-spacing:0.1em;\r\n  color:rgba(255,255,255,0.92);text-transform:uppercase;\r\n  margin-bottom:10px;\r\n}\r\n\r\n\r\n\/* Job card *\/\r\n#jhe3_ZMPTdU .job-card {\r\n  padding:8px 13px;border-radius:9px;\r\n  background:#111827;border:1px solid rgba(255,255,255,0.06);\r\n  margin-bottom:5px;cursor:default;\r\n  display:flex;align-items:center;gap:10px;\r\n  transition:background 0.2s,border-color 0.2s,box-shadow 0.2s;\r\n  position:relative;\r\n}\r\n\r\n#jhe3_ZMPTdU .job-card.selected {\r\n  background:rgba(5,84,242,0.1);\r\n  border-color:rgba(5,84,242,0.4);\r\n  box-shadow:0 0 0 3px rgba(5,84,242,0.1);\r\n}\r\n\r\n\r\n\/* Radio circle *\/\r\n#jhe3_ZMPTdU .jc-radio {\r\n  width:18px;height:18px;border-radius:50%;\r\n  border:1.5px solid rgba(255,255,255,0.15);\r\n  flex-shrink:0;display:flex;align-items:center;justify-content:center;\r\n  transition:border-color 0.2s,background 0.2s;\r\n}\r\n\r\n#jhe3_ZMPTdU .job-card.selected .jc-radio {\r\n  background:#0554F2;border-color:#0554F2;\r\n  box-shadow:0 0 0 3px rgba(5,84,242,0.18);\r\n}\r\n\r\n#jhe3_ZMPTdU .jc-radio-inner {\r\n  width:6px;height:6px;border-radius:50%;background:#fff;\r\n  transform:scale(0);transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1);\r\n}\r\n\r\n#jhe3_ZMPTdU .job-card.selected .jc-radio-inner {transform:scale(1);}\r\n\r\n\r\n#jhe3_ZMPTdU .jc-info {flex:1;min-width:0;}\r\n\r\n#jhe3_ZMPTdU .jc-title {font-size:11.5px;font-weight:600;color:rgba(255,255,255,0.82);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}\r\n\r\n#jhe3_ZMPTdU .jc-co {font-size:10px;color:rgba(255,255,255,0.38);}\r\n\r\n#jhe3_ZMPTdU .jc-dates {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:8px;color:rgba(255,255,255,0.22);letter-spacing:0.06em;flex-shrink:0;}\r\n\r\n\r\n\/* \u2550\u2550 TAILORING SHIMMER \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .tailoring-overlay {\r\n  position:absolute;inset:0;\r\n  background:#0d1117;\r\n  display:flex;flex-direction:column;\r\n  align-items:center;justify-content:center;gap:14px;\r\n  opacity:0;pointer-events:none;\r\n  transition:opacity 0.3s ease;\r\n  z-index:20;\r\n}\r\n\r\n#jhe3_ZMPTdU .tailoring-overlay.show {opacity:1;pointer-events:auto;}\r\n\r\n\r\n#jhe3_ZMPTdU .tailoring-txt {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:10px;font-weight:600;letter-spacing:0.18em;\r\n  color:rgba(96,176,255,0.7);text-transform:uppercase;\r\n}\r\n\r\n\r\n#jhe3_ZMPTdU .shimmer-bar {\r\n  width:200px;height:3px;\r\n  background:rgba(255,255,255,0.05);\r\n  border-radius:2px;overflow:hidden;\r\n}\r\n\r\n#jhe3_ZMPTdU .shimmer-fill {\r\n  height:100%;width:0%;\r\n  background:linear-gradient(90deg,#0554F2,#60B0FF,#0554F2);\r\n  background-size:200% 100%;\r\n  border-radius:2px;\r\n  animation:jhe3_shimbar 1.2s ease-in-out infinite;\r\n  transition:width 1.4s cubic-bezier(0.16,1,0.3,1);\r\n}\r\n\r\n@keyframes jhe3_jhe3_shimbar{\r\n  0%{background-position:100% 0;}\r\n  100%{background-position:-100% 0;}\r\n}\r\n\r\n\r\n\/* \u2550\u2550 DETAIL FOOTER \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .dp-footer {\r\n  padding:12px 20px 14px;\r\n  border-top:1px solid rgba(255,255,255,0.05);\r\n  display:flex;gap:8px;\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe3_ZMPTdU .dp-cancel {\r\n  flex:1;height:36px;\r\n  background:transparent;border:1px solid rgba(255,255,255,0.08);\r\n  border-radius:8px;color:rgba(255,255,255,0.35);\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:9px;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;\r\n  cursor:default;transition:background 0.2s;\r\n}\r\n\r\n#jhe3_ZMPTdU .dp-save {\r\n  flex:2;height:36px;\r\n  background:linear-gradient(180deg,#2563EB,#1D4ED8);\r\n  border:none;border-radius:8px;color:#fff;\r\n  font-family:'Inter',sans-serif;\r\n  font-size:12px;font-weight:700;letter-spacing:-0.01em;\r\n  cursor:default;\r\n  box-shadow:0 4px 16px rgba(37,99,235,0.38);\r\n  transition:background 0.2s,transform 0.12s,box-shadow 0.12s;\r\n  position:relative;overflow:hidden;\r\n}\r\n\r\n#jhe3_ZMPTdU .dp-save::after {content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.12s;}\r\n\r\n#jhe3_ZMPTdU .dp-save.clicking {transform:scale(0.97);}\r\n\r\n#jhe3_ZMPTdU .dp-save.clicking::after {background:rgba(255,255,255,0.15);}\r\n\r\n\r\n\/* \u2550\u2550 SUCCESS TOAST \u2550\u2550 *\/\r\n#jhe3_ZMPTdU .toast {\r\n  position:absolute;top:55px;\r\n  background:rgba(34,197,94,0.15);\r\n  border:1px solid rgba(34,197,94,0.35);\r\n  border-radius:9px;\r\n  padding:10px 16px;\r\n  display:flex;align-items:center;gap:10px;\r\n  white-space:nowrap;\r\n  box-shadow:0 8px 24px rgba(0,0,0,0.4),0 0 0 1px rgba(34,197,94,0.12);\r\n  opacity:0;\r\n  transition:opacity 0.35s ease,transform 0.35s ease;\r\n  z-index:100;\r\n}\r\n\r\n#jhe3_ZMPTdU .toast.show {opacity:1;}\r\n\r\n#jhe3_ZMPTdU .toast-check {\r\n  width:18px;height:18px;border-radius:50%;\r\n  background:rgba(34,197,94,0.2);border:1.5px solid rgba(34,197,94,0.5);\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-size:10px;color:#22c55e;flex-shrink:0;\r\n}\r\n\r\n#jhe3_ZMPTdU .toast-bold {font-size:12px;font-weight:700;color:#22c55e;}\r\n\r\n#jhe3_ZMPTdU .toast-light {font-size:12px;color:rgba(255,255,255,0.55);}\r\n\r\n#jhe3_ZMPTdU .toast-x {font-size:11px;color:rgba(255,255,255,0.2);margin-left:6px;}\r\n\r\n\r\n\/* \u2550\u2550 SIM CURSOR \u2550\u2550 *\/\r\n#jhe3_ZMPTdU #sim-cursor {\r\n  position:absolute;pointer-events:none;z-index:200;\r\n  opacity:0;transition:opacity 0.28s ease;\r\n}\r\n\r\n#jhe3_ZMPTdU #sim-cursor svg {display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.55));transform-origin:3px 2px;transition:transform 0.1s ease;}\r\n\r\n#jhe3_ZMPTdU #sim-cursor.pressing svg {transform:scale(0.78);}\r\n\r\n#jhe3_ZMPTdU #sim-ripple {position:absolute;top:0;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:rgba(255,255,255,0.55);opacity:0;transform:scale(0);pointer-events:none;}\r\n\r\n@keyframes jhe3_jhe3_ripple-out{0%{opacity:0.65;transform:scale(0);}100%{opacity:0;transform:scale(4);}}\r\n\r\n#jhe3_ZMPTdU #sim-ripple.fire {animation:jhe3_ripple-out 0.42s ease-out forwards;}\r\n\r\n\r\n\/* \u2550\u2550 MOBILE \u2550\u2550 *\/\r\n@media(max-width:720px){\r\n  \r\n\r\n  #jhe3_ZMPTdU .shell {display:flex;width:100%;height:100%;border-radius:14px;overflow:hidden;position:relative;}\r\n\r\n\r\n  \/* Bar: keep title + company, hide salary\/loc *\/\r\n  #jhe3_ZMPTdU .job-bar {padding:8px 14px;height:42px;}\r\n\r\n  #jhe3_ZMPTdU .jb-sal, #jhe3_ZMPTdU .jb-loc, #jhe3_ZMPTdU .jb-sep:nth-child(4), #jhe3_ZMPTdU .jb-sep:nth-child(6) {display:none;}\r\n\r\n  #jhe3_ZMPTdU .jb-btn-primary {padding:5px 12px;font-size:10px;}\r\n\r\n  \/* Hide Fit Analysis on mobile \u2014 primary action only *\/\r\n  #jhe3_ZMPTdU .jb-btn-active {display:none;}\r\n\r\n\r\n  \/* Main fills below bar *\/\r\n  #jhe3_ZMPTdU .main {\r\n    flex-direction:column;\r\n    padding-top:42px;\r\n    height:100%;\r\n    overflow:hidden;\r\n  }\r\n\r\n\r\n  \/* \u2500\u2500 Gap panel: full width, scrollable list \u2500\u2500 *\/\r\n  #jhe3_ZMPTdU .gap-panel {\r\n    width:100%;\r\n    height:100%;\r\n    border-right:none;\r\n    transition:transform 0.42s cubic-bezier(0.4,0,0.2,1);\r\n    display:flex;flex-direction:column;\r\n  }\r\n\r\n  #jhe3_ZMPTdU .gap-panel.shifted {transform:translateX(-100%);}\r\n\r\n\r\n  \/* Tighten panel header on mobile *\/\r\n  #jhe3_ZMPTdU .gap-panel-hdr {padding:10px 16px 8px;}\r\n\r\n  #jhe3_ZMPTdU .gph-title {font-size:15px;}\r\n\r\n  #jhe3_ZMPTdU .gph-sub {font-size:10px;}\r\n\r\n\r\n  \/* List scrollable so all rows are reachable *\/\r\n  #jhe3_ZMPTdU .gap-list {\r\n    flex:1;\r\n    overflow-y:auto;\r\n    padding:6px 12px 12px;\r\n    scrollbar-width:none;\r\n  }\r\n\r\n  #jhe3_ZMPTdU .gap-list::-webkit-scrollbar {display:none;}\r\n\r\n\r\n  \/* Tighter rows on mobile *\/\r\n  #jhe3_ZMPTdU .gap-section-hdr {font-size:10.5px;margin:6px 0 5px;}\r\n\r\n  #jhe3_ZMPTdU .gap-row {padding:6px 8px;margin-bottom:4px;gap:6px;}\r\n\r\n  #jhe3_ZMPTdU .gap-plus {width:18px;height:18px;font-size:11px;}\r\n\r\n  #jhe3_ZMPTdU .gap-sq {width:10px;height:10px;margin-top:3px;}\r\n\r\n  #jhe3_ZMPTdU .gap-txt {font-size:10px;line-height:1.4;}\r\n\r\n  #jhe3_ZMPTdU .gap-matched-badge {font-size:6.5px;padding:2px 5px;}\r\n\r\n\r\n  \/* \u2500\u2500 Bottom sheet: fixed height, content-tight \u2500\u2500 *\/\r\n  #jhe3_ZMPTdU .detail-panel {\r\n    position:absolute;\r\n    left:0;right:0;bottom:0;\r\n    width:100%;\r\n    \/* Fixed height \u2014 exactly fits handle + header + 3 cards + footer *\/\r\n    height:68svh;\r\n    transform:translateY(100%);\r\n    border-radius:16px 16px 0 0;\r\n    border-top:1px solid rgba(255,255,255,0.08);\r\n    box-shadow:0 -20px 60px rgba(0,0,0,0.7);\r\n    z-index:50;\r\n    display:flex;flex-direction:column;\r\n    overflow:hidden;\r\n  }\r\n\r\n  #jhe3_ZMPTdU .detail-panel.open {transform:translateY(0);}\r\n\r\n\r\n  \/* No flex:1 stretching on mobile \u2014 let content determine height *\/\r\n  #jhe3_ZMPTdU .dp-hdr {padding:12px 18px 10px;flex-shrink:0;}\r\n\r\n  #jhe3_ZMPTdU .dp-req-txt {font-size:12px;}\r\n\r\n  #jhe3_ZMPTdU .dp-where {\r\n    flex:1;\r\n    padding:10px 18px 6px;\r\n    overflow-y:auto;\r\n    scrollbar-width:none;\r\n  }\r\n\r\n  #jhe3_ZMPTdU .dp-where::-webkit-scrollbar {display:none;}\r\n\r\n  #jhe3_ZMPTdU .dp-where-lbl {margin-bottom:8px;font-size:11px;}\r\n\r\n  #jhe3_ZMPTdU .job-card {padding:9px 12px;margin-bottom:6px;}\r\n\r\n  #jhe3_ZMPTdU .jc-title {font-size:11px;}\r\n\r\n  #jhe3_ZMPTdU .jc-co {font-size:9.5px;}\r\n\r\n  #jhe3_ZMPTdU .jc-dates {font-size:7.5px;}\r\n\r\n\r\n  #jhe3_ZMPTdU .dp-footer {padding:18px 16px 28px;gap:8px;flex-shrink:0;}\r\n\r\n  #jhe3_ZMPTdU .dp-cancel {height:38px;font-size:8.5px;}\r\n\r\n  #jhe3_ZMPTdU .dp-save {height:38px;font-size:12px;}\r\n\r\n\r\n  \/* \u2500\u2500 Toast: full width at bottom \u2500\u2500 *\/\r\n  #jhe3_ZMPTdU .toast {\r\n    position:absolute;\r\n    top:auto;\r\n    bottom:16px;\r\n    left:12px;right:12px;\r\n    transform:translateY(10px);\r\n    white-space:normal;\r\n    width:auto;\r\n    z-index:101;\r\n  }\r\n\r\n  #jhe3_ZMPTdU .toast.show {transform:translateY(0);}\r\n\r\n  #jhe3_ZMPTdU .toast-light {font-size:11px;}\r\n\r\n  #jhe3_ZMPTdU .toast-bold {font-size:11px;}\r\n\r\n\r\n  \/* Handle *\/\r\n  #jhe3_ZMPTdU .dp-handle {\r\n    width:36px;height:4px;border-radius:2px;\r\n    background:rgba(255,255,255,0.15);\r\n    margin:10px auto 0;\r\n    flex-shrink:0;\r\n  }\r\n\r\n\r\n  \/* Backdrop *\/\r\n  #jhe3_ZMPTdU .mob-backdrop {\r\n    position:absolute;inset:0;\r\n    background:rgba(0,0,0,0.55);\r\n    opacity:0;pointer-events:none;\r\n    transition:opacity 0.42s ease;\r\n    z-index:40;\r\n  }\r\n\r\n  #jhe3_ZMPTdU .mob-backdrop.show {opacity:1;pointer-events:auto;}\r\n\r\n\r\n  #jhe3_ZMPTdU #sim-cursor {display:none;}\r\n\r\n}\r\n\r\n@media(min-width:721px){\r\n  #jhe3_ZMPTdU .dp-handle, #jhe3_ZMPTdU .mob-backdrop {display:none;}\r\n\r\n  \/* Desktop toast: centered *\/\r\n  #jhe3_ZMPTdU .toast {left:50%;transform:translateX(-50%) translateY(-12px);}\r\n\r\n  #jhe3_ZMPTdU .toast.show {transform:translateX(-50%) translateY(0);}\r\n\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/* \u2550\u2550 SHELL \u2550\u2550 *\/\r\n#jhe4_UH7Moi .shell {display:flex;width:100%;height:100%;border-radius:14px;overflow:hidden;position:relative;}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   LEFT \u2014 RAW JD PANEL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#jhe4_UH7Moi .jd-panel {\r\n  width:54%;flex-shrink:0;\r\n  background:#f0f3f8;\r\n  display:flex;flex-direction:column;\r\n  overflow:hidden;position:relative;\r\n}\r\n\r\n\r\n\/* Fake browser \/ job board chrome *\/\r\n#jhe4_UH7Moi .jd-chrome {\r\n  background:#fff;\r\n  border-bottom:1px solid #e2e6ec;\r\n  padding:8px 14px;\r\n  display:flex;align-items:center;gap:8px;\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe4_UH7Moi .jd-chrome-dots {display:flex;gap:4px;}\r\n\r\n#jhe4_UH7Moi .jd-chrome-dot {width:8px;height:8px;border-radius:50%;}\r\n\r\n#jhe4_UH7Moi .jd-chrome-dot:nth-child(1) {background:#ff5f57;}\r\n\r\n#jhe4_UH7Moi .jd-chrome-dot:nth-child(2) {background:#febc2e;}\r\n\r\n#jhe4_UH7Moi .jd-chrome-dot:nth-child(3) {background:#28c840;}\r\n\r\n#jhe4_UH7Moi .jd-chrome-bar {\r\n  flex:1;height:22px;\r\n  background:#f1f4f8;border-radius:5px;\r\n  display:flex;align-items:center;padding:0 10px;\r\n  font-size:10px;color:#9ca3af;\r\n  border:1px solid #e2e6ec;\r\n}\r\n\r\n#jhe4_UH7Moi .jd-chrome-bar-dot {width:6px;height:6px;border-radius:50%;background:#22c55e;margin-right:6px;flex-shrink:0;}\r\n\r\n\r\n\/* Job board header *\/\r\n#jhe4_UH7Moi .jb-board-hdr {\r\n  background:#fff;\r\n  border-bottom:1px solid #e8ecf2;\r\n  padding:10px 16px 9px;\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe4_UH7Moi .jb-company {font-size:11px;color:#6b7280;margin-bottom:3px;}\r\n\r\n#jhe4_UH7Moi .jb-job-title {font-size:16px;font-weight:700;color:#111827;letter-spacing:-0.01em;margin-bottom:5px;}\r\n\r\n#jhe4_UH7Moi .jb-meta {display:flex;gap:10px;flex-wrap:wrap;}\r\n\r\n#jhe4_UH7Moi .jb-meta-item {font-size:10.5px;color:#6b7280;display:flex;align-items:center;gap:4px;}\r\n\r\n#jhe4_UH7Moi .jb-meta-icon {font-size:10px;}\r\n\r\n\r\n#jhe4_UH7Moi .jb-apply {\r\n  display:inline-flex;align-items:center;gap:5px;\r\n  background:#2563EB;color:#fff;\r\n  font-size:11px;font-weight:600;\r\n  padding:5px 14px;border-radius:6px;\r\n  margin-top:7px;cursor:default;\r\n}\r\n\r\n\r\n\/* JD scroll body *\/\r\n#jhe4_UH7Moi .jd-body {\r\n  flex:1;overflow:hidden;\r\n  padding:13px 16px;\r\n  position:relative;\r\n}\r\n\r\n\r\n\/* Scan beam *\/\r\n#jhe4_UH7Moi #scan-beam {\r\n  position:absolute;left:0;right:0;top:0;height:2.5px;\r\n  background:linear-gradient(to right,transparent 0%,rgba(5,84,242,0.5) 15%,rgba(5,84,242,0.9) 50%,rgba(5,84,242,0.5) 85%,transparent 100%);\r\n  box-shadow:0 0 12px rgba(5,84,242,0.3),0 4px 16px rgba(5,84,242,0.15);\r\n  pointer-events:none;opacity:0;z-index:10;\r\n}\r\n\r\n\r\n\/* JD text sections *\/\r\n#jhe4_UH7Moi .jd-sec {margin-bottom:11px;}\r\n\r\n#jhe4_UH7Moi .jd-sec-title {\r\n  font-size:11.5px;font-weight:700;color:#374151;\r\n  margin-bottom:5px;letter-spacing:0.01em;\r\n  text-transform:uppercase;font-size:10px;color:#6b7280;letter-spacing:0.08em;\r\n}\r\n\r\n#jhe4_UH7Moi .jd-sec-body {font-size:11.5px;color:#4b5563;line-height:1.65;}\r\n\r\n\r\n\/* Inline keyword highlights *\/\r\n#jhe4_UH7Moi .kh {\r\n  border-radius:2px;padding:0 2px;\r\n  transition:background 0.28s,color 0.28s,box-shadow 0.28s;\r\n}\r\n\r\n#jhe4_UH7Moi .kh.lit-blue {background:rgba(37,99,235,0.13);color:#1d4ed8;box-shadow:0 0 0 1px rgba(37,99,235,0.3);}\r\n\r\n#jhe4_UH7Moi .kh.lit-indigo {background:rgba(99,102,241,0.12);color:#4338ca;box-shadow:0 0 0 1px rgba(99,102,241,0.3);}\r\n\r\n#jhe4_UH7Moi .kh.lit-green {background:rgba(22,163,74,0.1);color:#15803d;box-shadow:0 0 0 1px rgba(22,163,74,0.25);}\r\n\r\n#jhe4_UH7Moi .kh.lit-amber {background:rgba(245,158,11,0.1);color:#b45309;box-shadow:0 0 0 1px rgba(245,158,11,0.3);}\r\n\r\n\r\n\/* Section flash on scan *\/\r\n#jhe4_UH7Moi .jd-sec.scanning .jd-sec-title {color:#2563eb;transition:color 0.2s;}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   RIGHT \u2014 BRIEF PANEL\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n#jhe4_UH7Moi .brief-panel {\r\n  flex:1;background:#0d1117;\r\n  display:flex;flex-direction:column;\r\n  overflow:hidden;\r\n  border-left:1px solid rgba(255,255,255,0.06);\r\n}\r\n\r\n\r\n\/* Brief header *\/\r\n#jhe4_UH7Moi .brief-hdr {\r\n  padding:9px 16px 8px;\r\n  border-bottom:1px solid rgba(255,255,255,0.05);\r\n  flex-shrink:0;\r\n  display:flex;align-items:flex-start;justify-content:space-between;\r\n}\r\n\r\n#jhe4_UH7Moi .brief-eyebrow {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:10px;font-weight:700;letter-spacing:0.18em;\r\n  color:rgba(96,176,255,0.75);text-transform:uppercase;\r\n  margin-bottom:5px;\r\n}\r\n\r\n#jhe4_UH7Moi .brief-title {font-size:16px;font-weight:800;color:#22c55e;letter-spacing:-0.02em;line-height:1.2;}\r\n\r\n#jhe4_UH7Moi .brief-sub {font-size:11px;font-style:italic;color:rgba(255,255,255,0.55);margin-top:3px;}\r\n\r\n\r\n\/* JH shield icon *\/\r\n#jhe4_UH7Moi .brief-shield {\r\n  width:28px;height:28px;flex-shrink:0;\r\n  background:linear-gradient(135deg,#0554F2,#3B82F6);\r\n  border-radius:50%;\r\n  display:flex;align-items:center;justify-content:center;\r\n  font-size:12px;box-shadow:0 0 12px rgba(5,84,242,0.4);\r\n}\r\n\r\n\r\n\/* Scan status *\/\r\n#jhe4_UH7Moi .brief-status {\r\n  padding:4px 16px;\r\n  background:rgba(5,84,242,0.04);\r\n  border-bottom:1px solid rgba(5,84,242,0.08);\r\n  display:flex;align-items:center;gap:7px;\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe4_UH7Moi .brief-status-dot {\r\n  width:5px;height:5px;border-radius:50%;\r\n  background:#334155;flex-shrink:0;\r\n  transition:background 0.3s,box-shadow 0.3s;\r\n}\r\n\r\n#jhe4_UH7Moi .brief-status-dot.active {background:#0554F2;box-shadow:0 0 5px rgba(5,84,242,0.7);animation:jhe4_bsdot 1.4s ease-in-out infinite;}\r\n\r\n@keyframes jhe4_bsdot{0%,100%{opacity:1;}50%{opacity:0.25;}}\r\n\r\n#jhe4_UH7Moi .brief-status-txt {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:8px;font-weight:600;letter-spacing:0.18em;\r\n  color:rgba(255,255,255,0.25);text-transform:uppercase;\r\n  transition:color 0.3s;\r\n}\r\n\r\n#jhe4_UH7Moi .brief-status-txt.active {color:rgba(96,176,255,0.75);}\r\n\r\n\r\n\/* Cards container *\/\r\n#jhe4_UH7Moi .brief-cards {\r\n  flex:1;overflow-y:hidden;\r\n  padding:5px 12px 5px;\r\n  display:flex;flex-direction:column;\r\n  gap:3px;\r\n  scrollbar-width:none;\r\n}\r\n\r\n#jhe4_UH7Moi .brief-cards::-webkit-scrollbar {display:none;}\r\n\r\n\r\n\/* Insight card *\/\r\n#jhe4_UH7Moi .icard {\r\n  background:#111827;\r\n  border:1px solid rgba(255,255,255,0.06);\r\n  border-radius:10px;\r\n  padding:6px 12px;\r\n  opacity:0;transform:translateY(10px);\r\n  transition:opacity 0.4s ease,transform 0.4s ease;\r\n  flex-shrink:0;\r\n}\r\n\r\n#jhe4_UH7Moi .icard.visible {opacity:1;transform:translateY(0);}\r\n\r\n\r\n\/* Card left accent bar *\/\r\n#jhe4_UH7Moi .icard {position:relative;padding-left:16px;}\r\n\r\n#jhe4_UH7Moi .icard::before {\r\n  content:'';\r\n  position:absolute;left:0;top:8px;bottom:8px;\r\n  width:2.5px;border-radius:2px;\r\n}\r\n\r\n#jhe4_UH7Moi .icard.type-title::before {background:#0554F2;}\r\n\r\n#jhe4_UH7Moi .icard.type-why::before {background:#6366F1;}\r\n\r\n#jhe4_UH7Moi .icard.type-metrics::before {background:#22c55e;}\r\n\r\n#jhe4_UH7Moi .icard.type-resp::before {background:#F59E0B;}\r\n\r\n#jhe4_UH7Moi .icard.type-culture::before {background:#60B0FF;}\r\n\r\n\r\n#jhe4_UH7Moi .ic-label {\r\n  font-family:'Geist Mono','JetBrains Mono',monospace;\r\n  font-size:10px;\r\n  font-weight:800;letter-spacing:0.18em;\r\n  text-transform:uppercase;margin-bottom:4px;\r\n}\r\n\r\n#jhe4_UH7Moi .icard.type-title .ic-label {color:rgba(96,176,255,0.85);}\r\n\r\n#jhe4_UH7Moi .icard.type-why .ic-label {color:rgba(165,180,252,0.85);}\r\n\r\n#jhe4_UH7Moi .icard.type-metrics .ic-label {color:rgba(34,197,94,0.85);}\r\n\r\n#jhe4_UH7Moi .icard.type-resp .ic-label {color:rgba(245,158,11,0.85);}\r\n\r\n#jhe4_UH7Moi .icard.type-culture .ic-label {color:rgba(96,176,255,0.85);}\r\n\r\n\r\n#jhe4_UH7Moi .ic-content {font-size:clamp(11px, 0.85vw, 12.5px);color:rgba(255,255,255,0.78);line-height:1.5;}\r\n\r\n#jhe4_UH7Moi .ic-content strong {font-weight:600;color:rgba(255,255,255,0.88);}\r\n\r\n\r\n\/* Metrics card uses the shared .ic-content type scale (above) \u2014 no separate selectors. *\/\r\n\r\n\r\n\/* Resp rows \u2014 aligned to .ic-content type scale (clamp 11\u201312.5px, line-height 1.5) *\/\r\n#jhe4_UH7Moi .ic-resp-row {\r\n  display:flex;gap:8px;\r\n  padding:4px 0;\r\n  border-bottom:1px solid rgba(255,255,255,0.04);\r\n  font-size:clamp(11px, 0.85vw, 12.5px);line-height:1.5;\r\n}\r\n\r\n#jhe4_UH7Moi .ic-resp-row:last-child {border-bottom:none;padding-bottom:0;}\r\n\r\n#jhe4_UH7Moi .ic-resp-raw {color:rgba(255,255,255,0.4);flex:1;text-decoration:line-through;}\r\n\r\n#jhe4_UH7Moi .ic-resp-arrow {color:rgba(245,158,11,0.6);flex-shrink:0;font-size:clamp(11px, 0.85vw, 12.5px);}\r\n\r\n#jhe4_UH7Moi .ic-resp-decoded {color:rgba(255,255,255,0.78);flex:1;}\r\n\r\n\r\n\/* Culture \u2014 aligned to .ic-content type scale *\/\r\n#jhe4_UH7Moi .ic-culture-row {\r\n  display:flex;align-items:flex-start;gap:8px;\r\n  font-size:clamp(11px, 0.85vw, 12.5px);color:rgba(255,255,255,0.78);line-height:1.5;\r\n  margin-top:3px;\r\n}\r\n\r\n#jhe4_UH7Moi .ic-culture-icon {font-size:clamp(12px, 1vw, 14px);flex-shrink:0;margin-top:-1px;}\r\n\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n   MOBILE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n@media(max-width:720px){\r\n  \r\n\r\n  #jhe4_UH7Moi .shell {display:flex;width:100%;height:100%;border-radius:14px;overflow:hidden;position:relative;}\r\n\r\n\r\n  \/* Both panels fill the shell absolutely *\/\r\n  #jhe4_UH7Moi .jd-panel, #jhe4_UH7Moi .brief-panel {\r\n    position:absolute;inset:0;\r\n    width:100%;height:100%;\r\n    transition:transform 0.55s cubic-bezier(0.4,0,0.2,1);\r\n    overflow:hidden;\r\n  }\r\n\r\n\r\n  \/* JD starts visible, exits upward *\/\r\n  #jhe4_UH7Moi .jd-panel {\r\n    transform:translateY(0);\r\n    border-bottom:none;\r\n    border-right:none;\r\n  }\r\n\r\n  #jhe4_UH7Moi .jd-panel.exit {transform:translateY(-100%);}\r\n\r\n\r\n  \/* Brief starts below, enters upward *\/\r\n  #jhe4_UH7Moi .brief-panel {\r\n    transform:translateY(100%);\r\n    border-left:none;\r\n    border-top:1px solid rgba(255,255,255,0.06);\r\n  }\r\n\r\n  #jhe4_UH7Moi .brief-panel.enter {transform:translateY(0);}\r\n\r\n\r\n  \/* JD body takes more vertical space on mobile *\/\r\n  #jhe4_UH7Moi .jd-body {flex:1;}\r\n\r\n\r\n  \/* Show chrome on mobile (it helps establish context) *\/\r\n  #jhe4_UH7Moi .jd-chrome {display:flex;}\r\n\r\n  #jhe4_UH7Moi .jb-meta-item:nth-child(n+3) {display:none;}\r\n\r\n  #jhe4_UH7Moi .jb-apply {display:none;}\r\n\r\n  #jhe4_UH7Moi .jd-sec-body {font-size:11px;line-height:1.6;}\r\n\r\n\r\n  \/* Cards: spring entrance from below on mobile *\/\r\n  #jhe4_UH7Moi .icard {\r\n    opacity:0;\r\n    transform:translateY(40px);\r\n    transition:opacity 0.38s ease, transform 0.5s cubic-bezier(0.34,1.2,0.64,1);\r\n  }\r\n\r\n  #jhe4_UH7Moi .icard.visible {opacity:1;transform:translateY(0);}\r\n\r\n\r\n  \/* Brief tweaks *\/\r\n  #jhe4_UH7Moi .brief-title {font-size:14px;}\r\n\r\n  #jhe4_UH7Moi .brief-cards {padding:6px 12px 10px;gap:5px;}\r\n\r\n  #jhe4_UH7Moi .icard {padding:8px 12px 8px 14px;}\r\n\r\n  #jhe4_UH7Moi .ic-content {font-size:10.5px;}\r\n\r\n  #jhe4_UH7Moi .ic-resp-row {font-size:10.5px;}\r\n\r\n  #jhe4_UH7Moi .ic-culture-row {font-size:10.5px;}\r\n\r\n}\r\n\r\n\/* \u2500\u2500 Tablet (721\u2013991px) for the recruiter & insider tile internals.\r\n   The mobile (\u2264720) block above stacks gap-panel + detail-panel into a\r\n   bottom-sheet interaction. Tablet keeps the side-by-side layout but\r\n   shrinks fonts and stops truncating job titles so \"Senior Sales\r\n   Associate\", \"Sales Representative\", \"Account Executive\" read in full\r\n   instead of \"Senior\u2026\", \"Sales\u2026\", \"Acco\u2026\". \u2500\u2500 *\/\r\n@media (min-width: 721px) and (max-width: 991px) {\r\n  \/* \u2500\u2500\u2500\u2500\u2500 Recruiter tile \u2500\u2500\u2500\u2500\u2500 *\/\r\n  #jhe3_ZMPTdU .main             { padding-top: 36px; }\r\n  #jhe3_ZMPTdU .gap-panel        { width: 50%; }\r\n  #jhe3_ZMPTdU .gap-panel-hdr    { padding: 10px 14px 8px; }\r\n  #jhe3_ZMPTdU .gph-title        { font-size: 13px; }\r\n  #jhe3_ZMPTdU .gph-sub          { font-size: 9px; }\r\n  #jhe3_ZMPTdU .gph-eyebrow      { font-size: 7px; }\r\n  #jhe3_ZMPTdU .gap-section-hdr  { font-size: 10px; }\r\n  #jhe3_ZMPTdU .gap-row          { padding: 6px 7px; gap: 6px; }\r\n  #jhe3_ZMPTdU .gap-txt          { font-size: 9.5px; line-height: 1.4; }\r\n  #jhe3_ZMPTdU .gap-matched-badge { font-size: 6.5px; padding: 2px 5px; }\r\n\r\n  #jhe3_ZMPTdU .dp-hdr           { padding: 10px 14px 8px; }\r\n  #jhe3_ZMPTdU .dp-req-txt       { font-size: 11px; line-height: 1.4; }\r\n  #jhe3_ZMPTdU .dp-where         { padding: 10px 14px 8px; }\r\n  #jhe3_ZMPTdU .dp-where-lbl     { font-size: 10px; margin-bottom: 6px; }\r\n  #jhe3_ZMPTdU .job-card         { padding: 8px 10px; gap: 8px; }\r\n  \/* Un-truncate job titles: drop the ellipsis so titles read in full *\/\r\n  #jhe3_ZMPTdU .jc-title         {\r\n    font-size: 10.5px;\r\n    white-space: normal;\r\n    overflow: visible;\r\n    text-overflow: clip;\r\n    line-height: 1.25;\r\n  }\r\n  #jhe3_ZMPTdU .jc-co            { font-size: 9px; }\r\n  #jhe3_ZMPTdU .jc-dates         { font-size: 7.5px; }\r\n\r\n  #jhe3_ZMPTdU .jb-title         { font-size: 11px; }\r\n  #jhe3_ZMPTdU .jb-co            { font-size: 9.5px; }\r\n  #jhe3_ZMPTdU .jb-btn           { padding: 4px 8px; font-size: 9px; gap: 4px; }\r\n  #jhe3_ZMPTdU .jb-btn-primary   { padding: 4px 10px; font-size: 9.5px; }\r\n\r\n  \/* \u2500\u2500\u2500\u2500\u2500 Insider tile \u2500\u2500\u2500\u2500\u2500 *\/\r\n  #jhe4_UH7Moi .brief-title      { font-size: 13px; }\r\n  #jhe4_UH7Moi .icard            { padding: 8px 12px 8px 14px; }\r\n  #jhe4_UH7Moi .ic-label         { font-size: 8.5px; letter-spacing: 0.16em; }\r\n  #jhe4_UH7Moi .ic-content,\r\n  #jhe4_UH7Moi .ic-resp-row,\r\n  #jhe4_UH7Moi .ic-culture-row   { font-size: 10.5px; line-height: 1.45; }\r\n\r\n  \/* \u2500\u2500\u2500\u2500\u2500 Decryption tile (ext2) \u2014 JD panel compaction at tablet so\r\n     Requirements + Responsibilities + Qualifications all fit without scroll.\r\n     We hide the company\/location\/salary top row (jd-co-row \u2192 display:none,\r\n     a value-mod on the existing display:flex \u2014 safe inline) and tighten\r\n     spacing across the JD header, section labels, and list items. All\r\n     .kw spans stay in DOM untouched so the bezier connector animation\r\n     (doMatch \/ doGap, which uses getBoundingClientRect on each keyword)\r\n     keeps working. The user's \"move company\/location inline with title\"\r\n     proposal was deferred \u2014 would need DOM restructure, riskier.        \u2500\u2500\u2500\u2500\u2500 *\/\r\n  #jhe2_4Bd3me .jd-co-row        { display: none; }\r\n  #jhe2_4Bd3me .jd-title         { font-size: 14px; margin-bottom: 5px; line-height: 1.15; }\r\n  #jhe2_4Bd3me .jd-chips-row     { margin-bottom: 6px; gap: 4px; }\r\n  #jhe2_4Bd3me .jd-chip          { padding: 1px 7px; font-size: 8.5px; }\r\n  #jhe2_4Bd3me .jd-section       { margin-bottom: 7px; }\r\n  #jhe2_4Bd3me .jd-sec-hdr       { font-size: 8.5px; margin-bottom: 4px; padding-bottom: 3px; }\r\n  #jhe2_4Bd3me .jd-list          { gap: 3px; }\r\n  #jhe2_4Bd3me .jd-list li       { font-size: 10.5px; line-height: 1.4; }\r\n}\r\n<\/style>\r\n\r\n\r\n<script>\r\n\/* JS-inject text-transform on the section CTA. `text-transform` is a new\r\n   property on the existing .jh-it-section-cta selector \u2014 adding it via inline\r\n   <style> would risk being tree-shaken from the per-URL snapshot, so it lives\r\n   here. Keeps the HTML text in natural case for screen readers; CSS handles\r\n   the uppercase rendering. *\/\r\n(function () {\r\n    var injectId = 'jh-it-cta-upper-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent = '.jh-it-section-cta{text-transform:uppercase}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject scroll-margin-top so #anchor scrolls (\/features\/#insider-intel\r\n   etc.) land BELOW the fixed nav, not behind it. New property on .jh-it-tile,\r\n   would be tree-shaken from inline <style> by the per-URL CSS optimizer.\r\n   NOTE: an earlier attempt at nav-clearance (mobile sticky top:72px \/ height:\r\n   calc(100svh - 72px) and desktop max-height:calc(100vh - 88px)) was reverted\r\n   because both caused regressions \u2014 desktop max-height triggered inner-demo\r\n   column overflow on tile 3, and mobile sticky offset collapsed the demo\r\n   stage at short viewport heights. The nav-occlusion fix is deferred until a\r\n   non-regressing approach is found. Only anchor-scroll landing is kept here,\r\n   which has zero layout impact. *\/\r\n(function () {\r\n    var injectId = 'jh-it-nav-clearance-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent = '.jh-it-tile{scroll-margin-top:88px;}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject mobile copy compression so the demo stage gets more vertical room.\r\n   On mobile (\u2264720px), the long .jh-it-tile-desc paragraph was eating ~150\u2013210px\r\n   of the 660px sticky tile, leaving the demo stage clipped to ~50% of its\r\n   intended height. Hiding the description (eyebrow + headline + 3 wins + CTA\r\n   still carry the value prop) gives the demo back ~200px of room.\r\n   `display: none` is a NEW property on .jh-it-tile-desc \u2014 would be tree-shaken\r\n   from inline <style>, so it lives here. *\/\r\n(function () {\r\n    var injectId = 'jh-it-mobile-copy-compress-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent = '@media (max-width:720px){.jh-it-tile-desc{display:none;}}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject tablet (721\u2013991px) fixes for tile 3 (Role Decryption):\r\n   - Stack the SKILLS\/COMPETENCIES\/ATTRIBUTES chip-cols vertically. At tablet,\r\n     the resume panel is ~219px wide, but the 3 cols side-by-side need ~330px,\r\n     so the rightmost ATTRIBUTES column overflows past the viewport edge.\r\n     Switching .chip-cols from flex-direction:row \u2192 column gives each category\r\n     its own full-width row, restacking into vertical layout.\r\n   - Drop the right border on each col, replace with a bottom hairline (since\r\n     dividers now run horizontally between stacked rows).\r\n   - The bezier connector animation (drawLine in tile 3's JS) computes\r\n     positions via getBoundingClientRect() at draw time, so it auto-adapts to\r\n     the new chip layout \u2014 no JS changes needed.\r\n   All these are NEW properties on existing selectors, so JS-injected to bypass\r\n   the per-URL CSS optimizer's tree-shaking. *\/\r\n(function () {\r\n    var injectId = 'jh-it-tablet-chip-stack-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    \/* Use [data-jh-component=\"IntelTriptych\"] scoping to constrain the rule\r\n       to this section (in case .chip-cols \/ .chip-col are used elsewhere). *\/\r\n    s.textContent =\r\n        '@media (min-width:721px) and (max-width:991px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .chip-cols{flex-direction:column;}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .chip-col{' +\r\n                'border-right:none;' +\r\n                'border-bottom:1px solid rgba(255,255,255,0.04);' +\r\n                'padding:7px 10px;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .chip-col:last-child{' +\r\n                'border-bottom:none;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject content prune at tablet (721\u2013991px) + mobile (\u2264720px) so each\r\n   demo's content fits within the aspect-ratio-driven tile height. Hides\r\n   selected pure-chrome elements (no JS dependencies) and line-clamps the\r\n   per-card descriptions on the Insider tile.\r\n\r\n   All hidden elements stay in the DOM so JS that reads\/writes them\r\n   (e.g. #rp-badge-txt.textContent, .gap-chip.classList.add('show')) keeps\r\n   working \u2014 display:none on a parent doesn't error those calls; the state\r\n   updates just aren't visible while hidden.\r\n\r\n   Selectors are scoped under [data-jh-component=\"IntelTriptych\"] for safety.\r\n\r\n   ASSUMPTION on tile 2: .gap-list contains exactly two .gap-section-hdr\r\n   elements in document order (Must-Haves first, Nice-to-Haves second). If\r\n   that ever changes, the :nth-of-type targeting needs to be updated. *\/\r\n(function () {\r\n    var injectId = 'jh-it-content-prune-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    \/* NOTE on `!important`: the existing inline CSS uses dynamic per-tile IDs\r\n       (`#<ext_id> .className`, specificity 1,1,0) to scope rules. Our rules\r\n       use `[data-jh-component=...] .jh-it-tile--X .className` (specificity\r\n       0,3,0) which LOSES to the ID-prefixed rules. We can't preselect the\r\n       dynamic IDs from static CSS, so we use `!important` to override the\r\n       per-tile `display: flex\/block` declarations. This is justified \u2014 these\r\n       are layout-fit rules at narrow viewports, not contested style overrides. *\/\r\n    s.textContent =\r\n        '@media (max-width:991px){' +\r\n            \/* TILE 1 \u2014 Insider Brief: drop chrome + per-card teaser *\/\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jd-chrome,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .brief-shield,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .brief-sub{' +\r\n                'display:none !important;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .ic-content{' +\r\n                'display:-webkit-box !important;' +\r\n                '-webkit-line-clamp:1 !important;' +\r\n                '-webkit-box-orient:vertical !important;' +\r\n                'overflow:hidden !important;' +\r\n            '}' +\r\n            \/* TILE 2 \u2014 Recruiter View: must-haves dominate.\r\n               Nice-to-Haves header is selected via `.gap-row + .gap-section-hdr`\r\n               (general sibling combinator) \u2014 `:nth-of-type(2)` would NOT match\r\n               because gap-list children are all <div>s, so `:nth-of-type(2)`\r\n               selects the 2nd <div> (which is #gr-1, not a section header).\r\n               The combinator selects any .gap-section-hdr immediately after a\r\n               .gap-row \u2014 only Nice-to-Haves qualifies (Must-Haves is first\r\n               child, no preceding row). *\/\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter #gr-5,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .gap-list .gap-row + .gap-section-hdr,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jb-btn-active,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jc-dates{' +\r\n                'display:none !important;' +\r\n            '}' +\r\n            \/* TILE 3 \u2014 Role Decryption: drop resume header + legend + redundant gap-sec *\/\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .rp-hdr,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .rp-legend,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .gap-sec{' +\r\n                'display:none !important;' +\r\n            '}' +\r\n        '}' +\r\n        '@media (max-width:720px){' +\r\n            \/* TILE 2 mobile-only: also hide Must-Haves header (label becomes noise at <720px) *\/\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .gap-list .gap-section-hdr:nth-of-type(1){' +\r\n                'display:none !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject the mobile stage-sticky architecture: copy in normal flow above\r\n   a sticky 100svh stage. This gives the demo a TRUE 100% viewport when\r\n   pinned, recovering ~30% of vertical space previously eaten by copy inside\r\n   the sticky tile container. Position\/top\/height on .jh-it-tile-stage are\r\n   NEW properties for this selector at mobile \u2014 would tree-shake from inline\r\n   <style>. !important required to overcome dynamic per-tile #ID specificity\r\n   (see CLAUDE.md \"CSS deployment gotcha #3\"). The matching inline value-mods\r\n   to .jh-it-tile (sticky\u2192static, height 100svh\u2192auto) and .jh-it-tile-row\r\n   (height 100%\u2192auto) live in the inline @media block above. *\/\r\n(function () {\r\n    var injectId = 'jh-it-mobile-stage-sticky-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '@media (max-width:720px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile-stage{' +\r\n                'position:sticky !important;' +\r\n                'top:0 !important;' +\r\n                'height:100svh !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject the mobile insider-tile DEAD-SPACE fix (2026-05-26): shrink the\r\n   insider demo card to hug its content (560px) and CENTER it vertically in the\r\n   100svh sticky stage, instead of stretching both scenes to the full viewport.\r\n   Before: the JD\/scan scene left ~300px below the \"Reveal report\" CTA and the\r\n   revealed brief left ~370px below the last card, because .jd-panel\/.brief-panel\r\n   are absolute inset:0 inside a full-height shell with flex:1 bodies. The stage\r\n   itself stays sticky 100svh (the scroll-pin choreography is untouched) \u2014 only\r\n   the shell-wrap shrinks and the stage centers it, so the card now floats with\r\n   ~145px breathing room top\/bottom. Scene-1 (~542px: JD + reveal CTA) and\r\n   scene-2 (~529px: 5 brief cards) both fit 560px with ~20-30px residual, no clip.\r\n   NEW properties on these selectors at mobile (would tree-shake from inline\r\n   <style>) \u2192 injected here; !important defeats the #<id> .jh-ext-shell-wrap\r\n   (1,1,0) base rule and the dynamic per-tile #ID specificity (CLAUDE.md gotcha\r\n   #3). Scoped to .jh-it-tile--insider only; tablet\/desktop content already fits\r\n   their shorter aspect-ratio boxes, so this is gated max-width:720 and leaves\r\n   them alone. No frozen-animation-JS edit; reveal-CTA gate + bottom-sheet slide\r\n   are unchanged (the slide transforms by each panel's own height, now 560px). *\/\r\n(function () {\r\n    var injectId = 'jh-it-insider-mobile-fit-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '@media (max-width:720px){' +\r\n            \/* align-items:flex-start (was center): top-align the 560px card so the\r\n               copy->animation gap matches Tiles 2\/3 (~14px) instead of the ~64px the\r\n               vertical-centering created. The leftover stage space now sits below the\r\n               card. justify-content (horizontal) stays center. Mobile-only. *\/\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-it-tile-stage{' +\r\n                'align-items:flex-start !important;' +\r\n                'justify-content:center !important;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-ext-shell-wrap{' +\r\n                'height:560px !important;' +\r\n                'max-height:96svh !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject the insider-tile demo NARRATOR (static caption above the animation,\r\n   so a viewer grasps the purpose in <3s; the scan + brief scenes swap in the box\r\n   below it). New selectors -> would tree-shake from inline <style>, so injected.\r\n   DESKTOP\/TABLET ONLY (>=721px): stage stacks caption above the demo (flex column),\r\n   and the tile is content-driven so min-height on the shell-wrap gives the demo its\r\n   FULL height (also fixes the pre-existing ~16px clip) -- the tile grows, demo never\r\n   squeezed.\r\n   MOBILE (<=720px) is intentionally excluded and the caption is hidden: the demo is a\r\n   sticky 100svh pin that sits UNDER the fixed site header, so a top caption is hidden\r\n   behind it, and flex-column also inflates the finalized 560px centered card. Mobile\r\n   narration needs a dedicated pass that handles the header offset. *\/\r\n(function () {\r\n    var injectId = 'jh-it-insider-stage-caption-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-it-stage-cap{' +\r\n            'flex:none;width:100%;text-align:center;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-it-stage-cap-line{' +\r\n            'display:block;font-family:\\'Inter Tight\\',\\'Inter\\',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,0.92);line-height:1.25;letter-spacing:-0.01em;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-it-stage-cap-facts{' +\r\n            'display:block;margin-top:3px;font-family:\\'Geist Mono\\',\\'JetBrains Mono\\',monospace;font-size:9.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:rgba(96,176,255,0.8);line-height:1.3;' +\r\n        '}' +\r\n        '@media(min-width:721px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-it-tile-stage{' +\r\n                'flex-direction:column !important;gap:8px !important;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-ext-shell-wrap{' +\r\n                'height:auto !important;min-height:490px !important;' +\r\n            '}' +\r\n        '}' +\r\n        \/* Mobile (<=720px) intentionally EXCLUDED: the sticky demo pins under the\r\n           fixed site header, which hides a top caption, and flex-column inflated the\r\n           finalized 560px centered card to ~633px. Hide the caption here so mobile\r\n           stays exactly as finalized; the mobile narrator is a separate pass that\r\n           must account for the header offset. *\/\r\n        '@media(max-width:720px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--insider .jh-it-stage-cap{' +\r\n                'display:none !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject the Decryption-tile demo NARRATOR \u2014 same pattern as Insider, scoped to\r\n   .jh-it-tile--decryption. Desktop\/tablet only (>=721px): caption above the demo +\r\n   min-height keeps the demo at its current ~379px (it doesn't clip there), and the\r\n   content-driven tile grows ~497->~525px (well within the viewport). Mobile (<=720px)\r\n   excluded for now (caption hidden), pending the shared sticky-pin-under-header fix. *\/\r\n(function () {\r\n    var injectId = 'jh-it-decryption-stage-caption-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jh-it-stage-cap{' +\r\n            'flex:none;width:100%;text-align:center;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jh-it-stage-cap-line{' +\r\n            'display:block;font-family:\\'Inter Tight\\',\\'Inter\\',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,0.92);line-height:1.25;letter-spacing:-0.01em;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jh-it-stage-cap-facts{' +\r\n            'display:block;margin-top:3px;font-family:\\'Geist Mono\\',\\'JetBrains Mono\\',monospace;font-size:9.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:rgba(96,176,255,0.8);line-height:1.3;' +\r\n        '}' +\r\n        \/* Side labels: tag the two demo panels THE POSTING \/ YOUR PROFILE so the\r\n           job-vs-you comparison is explicit. New selector -> injected. Shown only\r\n           where the desktop shell shows (mobile uses #mob-spotlight); hidden <=720 too. *\/\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .rp-side-tag{' +\r\n            'font-family:\\'Geist Mono\\',\\'JetBrains Mono\\',monospace;font-size:8px;font-weight:700;letter-spacing:0.2em;text-transform:uppercase;color:rgba(96,176,255,0.6);padding:7px 14px 0;flex-shrink:0;' +\r\n        '}' +\r\n        '@media(min-width:721px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jh-it-tile-stage{' +\r\n                'flex-direction:column !important;gap:8px !important;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jh-ext-shell-wrap{' +\r\n                'height:auto !important;min-height:420px !important;' +\r\n            '}' +\r\n        '}' +\r\n        '@media(max-width:720px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jh-it-stage-cap,' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .rp-side-tag{' +\r\n                'display:none !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject the Recruiter-tile demo NARRATOR \u2014 caption above the gap-analysis demo,\r\n   for layout consistency with Tiles 1 & 3. Desktop\/tablet only (>=721px). This demo's\r\n   height is DEMO-driven (gap content), so shell-wrap uses min-height:540px (safely\r\n   above the ~510px no-clip floor; original was ~570px) \u2014 flex:1 was wrong here, it\r\n   collapsed the demo to the shorter copy column (~395px) and clipped the gap list.\r\n   Tile lands ~686px (in viewport). Mobile (<=720px) caption hidden, like the others. *\/\r\n(function () {\r\n    var injectId = 'jh-it-recruiter-stage-caption-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jh-it-stage-cap{' +\r\n            'flex:none;width:100%;text-align:center;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jh-it-stage-cap-line{' +\r\n            'display:block;font-family:\\'Inter Tight\\',\\'Inter\\',sans-serif;font-size:13px;font-weight:700;color:rgba(255,255,255,0.92);line-height:1.25;letter-spacing:-0.01em;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jh-it-stage-cap-facts{' +\r\n            'display:block;margin-top:3px;font-family:\\'Geist Mono\\',\\'JetBrains Mono\\',monospace;font-size:9.5px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:rgba(96,176,255,0.8);line-height:1.3;' +\r\n        '}' +\r\n        '@media(min-width:721px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jh-it-tile-stage{' +\r\n                'flex-direction:column !important;gap:8px !important;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jh-ext-shell-wrap{' +\r\n                'height:540px !important;max-height:540px !important;' +\r\n            '}' +\r\n        '}' +\r\n        '@media(max-width:720px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--recruiter .jh-it-stage-cap{' +\r\n                'display:none !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject tile 2 (Recruiter) click-flash visual feedback.\r\n   When the cursor \"clicks\" the + button on a gap row, the only existing\r\n   feedback is the + glyph swapping to \u2192 (subtle, especially on smaller\r\n   screens). This adds a brief green-glow flash on both the row and the\r\n   + button at the click moment to make the interaction unmistakable.\r\n   Lasts ~400ms then fades into the existing blue .highlighted state.\r\n   Fires on all viewports (desktop + tablet + mobile) regardless of\r\n   cursor presence because the autonomous animation runs everywhere.\r\n   New CSS classes \u2014 JS-injected (would tree-shake inline) with\r\n   !important to overcome the per-tile #<ext_id> rule specificity. *\/\r\n(function () {\r\n    var injectId = 'jh-it-tile2-click-flash-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '[data-jh-component=\"IntelTriptych\"] .gap-row.click-flash{' +\r\n            'background:rgba(34,197,94,0.08) !important;' +\r\n            'border-color:rgba(34,197,94,0.5) !important;' +\r\n            'box-shadow:0 0 0 1px rgba(34,197,94,0.45), 0 0 16px rgba(34,197,94,0.35) !important;' +\r\n            'transition:background 0.15s ease, border-color 0.15s ease, box-shadow 0.18s ease !important;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .gap-plus.click-flash{' +\r\n            'background:rgba(34,197,94,0.28) !important;' +\r\n            'border-color:rgba(34,197,94,0.6) !important;' +\r\n            'color:#22c55e !important;' +\r\n            'transform:scale(1.12);' +\r\n            'transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease !important;' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject tile 3 tablet aspect-ratio override + bullet compaction.\r\n   At desktop, .jh-it-tile is 16\/9 (and insider is 16\/11). At tablet\r\n   (721\u2013991px), tile 3's 16\/9 ratio gives ~393px shell height which clips\r\n   Qualifications. 16\/11 brought us to ~481px (still ~30-50px short \u2014 Qual\r\n   header was visible but its bullets clipped, Responsibilities partial).\r\n   Going to 4\/3 (= 16\/12) gives ~525px AND tightening .jd-list line-height\r\n   1.4\u21921.3 + gap 3\u21922 saves another ~25-30px. All 3 sections + all bullets\r\n   now fit comfortably. Mobile keeps aspect-ratio:auto !important.\r\n   These are NEW properties on .jh-it-tile--decryption \/ value-mods on\r\n   existing .jd-list rules \u2014 JS-injected with !important to defeat cascade\r\n   and the per-tile #<ext_id> specificity. *\/\r\n(function () {\r\n    var injectId = 'jh-it-tile3-tablet-aspect-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '@media (min-width:721px) and (max-width:991px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption{' +\r\n                'aspect-ratio:4\/3 !important;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jd-list{' +\r\n                'gap:2px !important;' +\r\n            '}' +\r\n            '[data-jh-component=\"IntelTriptych\"] .jh-it-tile--decryption .jd-list li{' +\r\n                'line-height:1.3 !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject:\r\n   1. Blue color on the mob-final-count digits so they pop against the\r\n      greenish badge \u2014 currently they read the same as the surrounding\r\n      \"matches identified\" text and disappear.\r\n   2. The whole tile is an <a href=\"\/features\/...\">. The 3 demos should NOT\r\n      navigate on click\/tap on ANY breakpoint. (Was \u2264991px only, which left\r\n      desktop + large tablets navigating from the demo, AND killed the CTA\r\n      link on mobile.) Fix: pointer-events:none on the tile, re-enabled ONLY\r\n      on the low-profile CTA \u2014 a click on the CTA still bubbles to the <a>\r\n      and follows the href, so the CTA stays the single link to \/features\/.\r\n      The IntersectionObserver is unaffected (doesn't depend on pointer-events);\r\n      touch-scroll is unaffected (pointer-events blocks click, not touchmove).\r\n      Tile-level :hover stops firing under pointer-events:none, so the CTA\r\n      gets its own :hover affordance (was .jh-it-tile:hover .jh-it-tile-cta).\r\n   All are NEW properties on their selectors \u2014 must be JS-injected, and the\r\n   pointer-events rules need !important to beat existing :hover pointer styles. *\/\r\n(function () {\r\n    var injectId = 'jh-it-counter-blue-and-tile-nonclickable-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '[data-jh-component=\"IntelTriptych\"] #mob-final-count{' +\r\n            'color:#60B0FF;' +\r\n            'font-weight:700;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile{' +\r\n            'pointer-events:none !important;' +\r\n            'cursor:default !important;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile .jh-it-tile-cta{' +\r\n            'pointer-events:auto !important;' +\r\n            'cursor:pointer !important;' +\r\n        '}' +\r\n        '[data-jh-component=\"IntelTriptych\"] .jh-it-tile .jh-it-tile-cta:hover{' +\r\n            'color:#60B0FF !important;' +\r\n            'transform:translateX(2px) !important;' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n\/* JS-inject tile 3 (Decryption) mobile spotlight gap fix.\r\n   The .mob-card (sentence card) and .mob-final (terminal \"9 skills matched\"\r\n   banner) BOTH have flex-shrink:0 + min-height:148px in the per-tile inline\r\n   CSS. They occupy 148px each regardless of which is currently .visible,\r\n   creating dead vertical space in two scenarios:\r\n   - Mid-cycle (card.visible, final not.visible): .mob-final invisible block\r\n     adds ~148px gap below the card before chips\r\n   - Terminal (final.visible, card not.visible\/not.exit): .mob-card invisible\r\n     block adds ~148px gap above the green banner\r\n   Fix: collapse height + padding + borders when the element isn't actively\r\n   shown. mob-card stays full-height during .visible OR .exit (preserves the\r\n   exit animation transition); mob-final collapses any time .visible is\r\n   absent. Height-jump on toggle is acceptable because the card\u2192final\r\n   transition swaps in place (card collapses 148\u21920 while final grows 0\u2192148\r\n   simultaneously \u2014 net layout shift = 0). *\/\r\n(function () {\r\n    var injectId = 'jh-it-tile3-mobile-collapse-injected';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '@media (max-width:720px){' +\r\n            '[data-jh-component=\"IntelTriptych\"] .mob-card:not(.visible):not(.exit),' +\r\n            '[data-jh-component=\"IntelTriptych\"] .mob-final:not(.visible){' +\r\n                'height:0 !important;' +\r\n                'min-height:0 !important;' +\r\n                'padding-top:0 !important;' +\r\n                'padding-bottom:0 !important;' +\r\n                'margin-top:0 !important;' +\r\n                'margin-bottom:0 !important;' +\r\n                'border-top-width:0 !important;' +\r\n                'border-bottom-width:0 !important;' +\r\n                'overflow:hidden !important;' +\r\n            '}' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n})();\r\n\r\n(function() {\r\n    var sections = document.querySelectorAll('.jh-it-section');\r\n    if (!sections.length) return;\r\n\r\n    sections.forEach(function(section) {\r\n        var tiles = section.querySelectorAll('.jh-it-tile');\r\n        if (!tiles.length) return;\r\n\r\n        \/\/ Each tile has its own IntersectionObserver \u2014 animation runs only when\r\n        \/\/ the specific tile is in view. The lifted slide scripts watch for\r\n        \/\/ the .is-focal class on .jh-it-tile (their patched selector) and\r\n        \/\/ start\/stop their per-tile animation accordingly.\r\n        tiles.forEach(function(tile) {\r\n            var io = new IntersectionObserver(function(entries) {\r\n                entries.forEach(function(entry) {\r\n                    if (entry.isIntersecting) {\r\n                        tile.classList.add('is-focal');\r\n                    } else {\r\n                        tile.classList.remove('is-focal');\r\n                    }\r\n                });\r\n            }, { threshold: 0.4 });\r\n            io.observe(tile);\r\n\r\n            window.addEventListener('beforeunload', function() {\r\n                tile.classList.remove('is-focal');\r\n                io.disconnect();\r\n            });\r\n        });\r\n    });\r\n})();\r\n<\/script>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-f3ffc7a elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"f3ffc7a\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ea32b54 exad-sticky-section-no\" data-id=\"ea32b54\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-3348e1a exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"3348e1a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<section\n    id=\"jh_es_Qch7Fw\"\n    class=\"jh-es-section\"\n    data-jh-component=\"ExtensionSpotlight\"\n    role=\"region\"\n    aria-label=\"Chrome Extension Spotlight\">\n\n    <header class=\"jh-es-section-header\">\n        <span class=\"jh-es-eyebrow\">&#9654; APPLICATION AUTOMATION<\/span>\n        <h2 class=\"jh-es-headline\">\n            <span class=\"jh-es-beat jh-es-beat-1\">3 minutes.<\/span>\n            <span class=\"jh-es-beat jh-es-beat-2\">2 minutes.<\/span>\n            <span class=\"jh-es-beat jh-es-beat-3\">1 minute.<\/span>\n            <span class=\"jh-es-beat jh-es-beat-go jh-es-headline-accent\">Apply.<\/span>\n        <\/h2>\n    <\/header>\n\n    <!-- Demo label \u2014 names the animation + surfaces the major benefits right at the demo -->\n    <div class=\"jh-es-demo-label\">\n        <div class=\"jh-es-demo-tag\">\n            <span class=\"jh-es-chrome-ico\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" focusable=\"false\"><path d=\"M12 12L2.474 6.5A11 11 0 0 1 21.526 6.5Z\" fill=\"#EA4335\"\/><path d=\"M12 12L12 23A11 11 0 0 1 2.474 6.5Z\" fill=\"#34A853\"\/><path d=\"M12 12L21.526 6.5A11 11 0 0 1 12 23Z\" fill=\"#FBBC05\"\/><circle cx=\"12\" cy=\"12\" r=\"5\" fill=\"#fff\"\/><circle cx=\"12\" cy=\"12\" r=\"3.8\" fill=\"#4285F4\"\/><\/svg><\/span>\n            <span>JUSTHIRED &middot; CHROME EXTENSION<\/span>\n        <\/div>\n        <h3 class=\"jh-es-demo-title\">Apply with AI that knows your resume and the job.<\/h3>\n        <ul class=\"jh-es-demo-chips\" role=\"list\">\n            <li>Knows the job you&rsquo;re applying to<\/li>\n            <li>Has your tailored resume loaded<\/li>\n            <li>Remembers your 100 most common fields<\/li>\n        <\/ul>\n    <\/div>\n\n    <div class=\"jh-es-stage\">\n        <div class=\"jh-es-hud\">\n            <!-- Faux Chrome browser bar \u2014 frames the demo as running on the real application page -->\n            <div class=\"jh-es-browserbar\" aria-hidden=\"true\">\n                <span class=\"jh-es-bb-chrome\"><svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" focusable=\"false\"><path d=\"M12 12L2.474 6.5A11 11 0 0 1 21.526 6.5Z\" fill=\"#EA4335\"\/><path d=\"M12 12L12 23A11 11 0 0 1 2.474 6.5Z\" fill=\"#34A853\"\/><path d=\"M12 12L21.526 6.5A11 11 0 0 1 12 23Z\" fill=\"#FBBC05\"\/><circle cx=\"12\" cy=\"12\" r=\"5\" fill=\"#fff\"\/><circle cx=\"12\" cy=\"12\" r=\"3.8\" fill=\"#4285F4\"\/><\/svg><\/span>\n                <span class=\"jh-es-bb-addr\">\n                    <span class=\"jh-es-bb-lock\"><svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" focusable=\"false\"><rect x=\"5\" y=\"11\" width=\"14\" height=\"9\" rx=\"2\" fill=\"currentColor\"\/><path d=\"M8 11V8a4 4 0 0 1 8 0v3\" stroke=\"currentColor\" stroke-width=\"2\"\/><\/svg><\/span>\n                    <span class=\"jh-es-bb-url\">apextechnologies.com\/careers\/apply<\/span>\n                <\/span>\n                <span class=\"jh-es-bb-kebab\">&#8942;<\/span>\n            <\/div>\n            \n<div id=\"jhdemo_WOSCNG\" class=\"jh-ext-shell-wrap jh-ext-demo-standalone\">\n<div class=\"shell\">\n\n  <!-- Persistent brand header \u2014 visible on mobile only, always on top -->\n  <div class=\"mobile-header\">\n    <div class=\"sb-logo\">JUST H<span class=\"bar\" style=\"color:#60B0FF;\">|<\/span>RED<\/div>\n    <div class=\"sb-active-pill\">\n      <div class=\"sb-dot\"><\/div>\n      <span class=\"sb-active-text\">Active<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- FORM SIDE -->\n  <div class=\"form-side\">\n    <div class=\"ats-bar\">\n      <div class=\"ats-mark\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg>\n      <\/div>\n      <span class=\"ats-bar-name\">Apex Technologies<\/span>\n      <div class=\"ats-bar-sep\"><\/div>\n      <span class=\"ats-bar-job\">Senior Software Engineer \u2014 Application<\/span>\n    <\/div>\n\n    <div class=\"ats-steps\">\n      <div class=\"ats-step active\"><div class=\"ats-step-n\">1<\/div><span>Personal Info<\/span><\/div>\n      <div class=\"ats-step-sep\"><\/div>\n      <div class=\"ats-step\"><div class=\"ats-step-n\">2<\/div><span>Experience<\/span><\/div>\n      <div class=\"ats-step-sep\"><\/div>\n      <div class=\"ats-step\"><div class=\"ats-step-n\">3<\/div><span>Documents<\/span><\/div>\n      <div class=\"ats-step-sep\"><\/div>\n      <div class=\"ats-step\"><div class=\"ats-step-n\">4<\/div><span>Review<\/span><\/div>\n    <\/div>\n\n    <div class=\"form-body\">\n      <div class=\"sec-label\">Personal Information<\/div>\n\n      <div class=\"field-grid\">\n        <div class=\"field-group\">\n          <div class=\"label-row\">\n            <label>Current Title<\/label>\n            <span class=\"badge b-ready\" id=\"b-ph\">\u26a1 Ready<\/span>\n          <\/div>\n          <input class=\"form-input\" id=\"f-ph\" type=\"text\" readonly>\n        <\/div>\n        <div class=\"field-group\">\n          <div class=\"label-row\">\n            <label>Current Employer<\/label>\n            <span class=\"badge b-ready\" id=\"b-em\">\u26a1 Ready<\/span>\n          <\/div>\n          <input class=\"form-input\" id=\"f-em\" type=\"text\" readonly>\n        <\/div>\n        <div class=\"field-group\">\n          <div class=\"label-row\">\n            <label>Desired Compensation<\/label>\n            <span class=\"badge b-ready\" id=\"b-cp\">\u26a1 Ready<\/span>\n          <\/div>\n          <input class=\"form-input\" id=\"f-cp\" type=\"text\" readonly>\n        <\/div>\n        <div class=\"field-group\">\n          <div class=\"label-row\">\n            <label>LinkedIn Profile<\/label>\n            <span class=\"badge b-ready\" id=\"b-ln\">\u26a1 Ready<\/span>\n          <\/div>\n          <input class=\"form-input\" id=\"f-ln\" type=\"text\" readonly>\n        <\/div>\n      <\/div>\n\n      <div class=\"field-full field-auth\">\n        <div class=\"label-row\">\n          <label>Authorized to work in the US?<\/label>\n          <span class=\"badge b-select\" id=\"b-au\">\u26a0 Select option<\/span>\n        <\/div>\n        <div class=\"pill-row\">\n          <div class=\"auth-pill\" id=\"pill-yes\">Yes<\/div>\n          <div class=\"auth-pill\" id=\"pill-no\">No<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"field-full\">\n        <div class=\"label-row\">\n          <label>Resume \/ CV<\/label>\n          <span class=\"badge b-resume\" id=\"b-rv\">\u2193 Resume<\/span>\n        <\/div>\n        <div class=\"upload-zone\" id=\"upload-zone\">\n          <div class=\"upload-zone-idle\">\n            <div class=\"upload-zone-icon\">\u2b06<\/div>\n            <div class=\"upload-zone-text\">Drop file here or <span>click to upload<\/span><\/div>\n            <div class=\"upload-zone-sub\">PDF, DOCX \u2014 max 10MB<\/div>\n          <\/div>\n          <div class=\"upload-zone-file\">\n            <span class=\"uf-name\">sarah_chen_resume.pdf<\/span>\n            <span class=\"uf-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"field-full\">\n        <div class=\"label-row\">\n          <label>Describe a complex problem you solved that applies to this role?<\/label>\n          <span class=\"badge b-ai\" id=\"b-ai\">\u2726 Ask AI<\/span>\n        <\/div>\n        <textarea class=\"form-textarea\" id=\"f-ai\" readonly><\/textarea>\n      <\/div>\n\n    <\/div>\n\n    <!-- Mobile-only form submit \u2014 the \"actual\" submission button inside the ATS form view.\n         Hidden on desktop (inline display:none); JS-injected mobile CSS sets display:block!important. -->\n    <div class=\"form-submit-row\" id=\"form-submit-row\" style=\"display:none;\">\n      <button class=\"form-submit-btn\" id=\"form-submit-btn\">Submit Application<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- SIDEBAR -->\n  <div class=\"sidebar\">\n    <div class=\"sb-brand\">\n      <div class=\"sb-logo\">JUST H<span class=\"bar\">|<\/span>RED<\/div>\n      <div class=\"sb-active-pill\">\n        <div class=\"sb-dot\"><\/div>\n        <span class=\"sb-active-text\">Active<\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"doc-deck\">\n      <div class=\"doc-card\">\n        <div class=\"sb-dot-blue\"><\/div>\n        <span class=\"dc-label\">Resume<\/span>\n        <span class=\"dc-arr\">\u2193<\/span>\n      <\/div>\n      <div class=\"doc-card\">\n        <div class=\"sb-dot-blue\"><\/div>\n        <span class=\"dc-label\">Cover Letter<\/span>\n        <span class=\"dc-arr\">\u2193<\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"fields-panel\">\n      <div class=\"fp-bar\">\n        <div class=\"fp-bar-text\" id=\"fp-counter\">\ud83d\udccd 11 fields ready to fill<\/div>\n      <\/div>\n      <div class=\"fp-grid\">\n\n        <div class=\"fcard done\" id=\"c-ph\">\n          <div class=\"fc-label\">Current Title<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">Senior Software Engineer<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard done\" id=\"c-em\">\n          <div class=\"fc-label\">Current Employer<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">Stripe, Inc.<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard done\" id=\"c-cp\">\n          <div class=\"fc-label\">Desired Compensation<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">$145,000 \/ year<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard done\" id=\"c-ln\">\n          <div class=\"fc-label\">LinkedIn Profile<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">linkedin.com\/in\/sarahchen<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <!-- Additional profile cards: data the extension auto-fills across later\n             application steps (Experience, Documents, Review). Always shown in\n             the .done state \u2014 these don't have a corresponding form input on\n             this Personal Info step so there's no pushField animation. -->\n        <div class=\"fcard done\">\n          <div class=\"fc-label\">Phone Number<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">+1 (415) 555-0102<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard done\">\n          <div class=\"fc-label\">Location<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">San Francisco, CA<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard done\">\n          <div class=\"fc-label\">Years of Experience<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">8 years<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard done\">\n          <div class=\"fc-label\">Notice Period<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\">2 weeks<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard sel-type span2\" id=\"c-au\">\n          <div class=\"fc-label\">Work Authorization<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\" id=\"c-au-val\" style=\"color:rgba(245,158,11,0.95);font-style:italic;font-size:8.5px;font-weight:700;\">\u26a0 Select 'Yes' on page<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard resume-type span2\" id=\"c-rv\">\n          <div class=\"fc-label\">Resume \/ CV<\/div>\n          <div class=\"fc-val-row\">\n            <div class=\"fc-input\" id=\"c-rv-val\">\u2193 Download from profile<\/div>\n            <span class=\"fc-check\">\u2713<\/span>\n          <\/div>\n        <\/div>\n\n        <div class=\"fcard ai-type span2\" id=\"c-ai\">\n          <div class=\"fc-label\">Complex Problem \u2014 Ask AI<\/div>\n          <textarea class=\"fc-textarea\" id=\"fc-ai-text\" readonly><\/textarea>\n          <button class=\"ask-ai-btn\" id=\"ask-ai-btn\">\u2726 Ask AI<\/button>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <div class=\"notif\" id=\"notif\">\n      <span class=\"notif-spark\">\u2726<\/span>\n      <div class=\"notif-text\">Getting smarter \u2014 saved 6 fields<\/div>\n      <div class=\"notif-dots\">\n        <div class=\"ndot\"><\/div><div class=\"ndot\"><\/div><div class=\"ndot\"><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"sb-actions\">\n      <button class=\"btn-submit\" id=\"btn-submit\">Submit Application<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- Simulated cursor \u2014 absolutely positioned over shell -->\n  <div id=\"sim-cursor\">\n    <svg width=\"20\" height=\"24\" viewBox=\"0 0 20 24\" fill=\"none\">\n      <path d=\"M3.5 2L3.5 18.5L7.8 14.2L11 22L13.4 21L10.2 13.2L16.5 13.2Z\"\n        fill=\"white\" stroke=\"rgba(0,0,0,0.28)\" stroke-width=\"1.4\"\n        stroke-linejoin=\"round\" stroke-linecap=\"round\"\/>\n    <\/svg>\n    <div id=\"sim-ripple\"><\/div>\n  <\/div>\n\n<\/div>\n<\/div>\n\n<style>\n\/* \u2500\u2500 Standalone wrapper sizing \u2014 gives the shell a defined display area\n   without relying on the carousel's flex parent. \u2500\u2500 *\/\n#jhdemo_WOSCNG.jh-ext-demo-standalone {\n  width: 100%;\n  max-width: 720px;\n  aspect-ratio: 16 \/ 11;\n  margin: 0 auto;\n  display: block;\n}\n\n#jhdemo_WOSCNG.jh-ext-demo-standalone .shell {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  border-radius: 14px;\n  overflow: hidden;\n  position: relative;\n  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);\n}\n\n\/* \u2500\u2500 SIMULATED CURSOR \u2500\u2500 *\/\n#jhdemo_WOSCNG #sim-cursor {\n  position:absolute;\n  pointer-events:none;\n  z-index:200;\n  opacity:0;\n  transition:opacity 0.28s ease;\n}\n\n#jhdemo_WOSCNG #sim-cursor svg {\n  display:block;\n  filter:drop-shadow(0px 1px 3px rgba(0,0,0,0.55));\n  transition:transform 0.1s ease;\n  transform-origin:3px 2px;\n}\n\n#jhdemo_WOSCNG #sim-cursor.pressing svg {transform:scale(0.78);}\n\n#jhdemo_WOSCNG #sim-ripple {\n  position:absolute;\n  top:0;left:0;\n  width:16px;height:16px;\n  margin:-8px 0 0 -8px;\n  border-radius:50%;\n  background:rgba(255,255,255,0.55);\n  opacity:0;transform:scale(0);\n  pointer-events:none;\n}\n\n@keyframes jhdemo_ripple-out{\n  0%  {opacity:0.65;transform:scale(0);}\n  100%{opacity:0;transform:scale(4);}\n}\n\n#jhdemo_WOSCNG #sim-ripple.fire {animation:jhdemo_ripple-out 0.42s ease-out forwards;}\n\n\n\/* \u2500\u2500 FORM SIDE \u2500\u2500 *\/\n#jhdemo_WOSCNG .form-side {flex:1;background:#f1f4f8;display:flex;flex-direction:column;overflow:hidden;}\n\n#jhdemo_WOSCNG .ats-bar {background:#1c2b4a;padding:6px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;}\n#jhdemo_WOSCNG .ats-mark {width:26px;height:26px;background:rgba(255,255,255,0.12);border-radius:5px;display:flex;align-items:center;justify-content:center;}\n#jhdemo_WOSCNG .ats-mark svg {width:13px;height:13px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}\n#jhdemo_WOSCNG .ats-bar-name {font-size:10.5px;font-weight:600;color:rgba(255,255,255,0.7);letter-spacing:0.04em;text-transform:uppercase;}\n#jhdemo_WOSCNG .ats-bar-sep {width:1px;height:13px;background:rgba(255,255,255,0.12);margin:0 3px;}\n#jhdemo_WOSCNG .ats-bar-job {font-size:10.5px;font-weight:500;color:rgba(255,255,255,0.45);}\n\n#jhdemo_WOSCNG .ats-steps {background:#fff;border-bottom:1px solid #e2e6ec;padding:5px 14px;display:flex;align-items:center;flex-shrink:0;}\n#jhdemo_WOSCNG .ats-step {display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:500;color:#9ca3af;}\n#jhdemo_WOSCNG .ats-step.active {color:#2563eb;}\n#jhdemo_WOSCNG .ats-step-n {width:17px;height:17px;border-radius:50%;border:1.5px solid currentColor;display:flex;align-items:center;justify-content:center;font-size:8.5px;font-weight:700;flex-shrink:0;}\n#jhdemo_WOSCNG .ats-step.active .ats-step-n {background:#2563eb;border-color:#2563eb;color:#fff;}\n#jhdemo_WOSCNG .ats-step-sep {width:22px;height:1px;background:#e2e6ec;margin:0 5px;}\n\n#jhdemo_WOSCNG .form-body {flex:1;padding:10px 14px;overflow-y:auto;scrollbar-width:none;}\n#jhdemo_WOSCNG .form-body::-webkit-scrollbar {display:none;}\n\n#jhdemo_WOSCNG .sec-label {font-size:10px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:0.1em;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #e2e6ec;}\n\n#jhdemo_WOSCNG .field-grid {display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;}\n#jhdemo_WOSCNG .field-full {margin-bottom:6px;}\n#jhdemo_WOSCNG .field-group {position:relative;}\n\n#jhdemo_WOSCNG .label-row {display:flex;align-items:flex-start;gap:6px;margin-bottom:2px;flex-wrap:nowrap;}\n#jhdemo_WOSCNG .label-row label {font-size:11px;font-weight:500;color:#4b5563;line-height:1.3;flex:1;min-width:0;}\n#jhdemo_WOSCNG .label-row .badge {flex-shrink:0;}\n\n\/* BADGES *\/\n#jhdemo_WOSCNG .badge {\n  display:inline-flex;align-items:center;gap:3px;\n  font-size:9.5px;font-weight:600;\n  padding:2px 7px;border-radius:6px;\n  white-space:nowrap;position:relative;line-height:1.5;\n  transition:background 0.35s ease,color 0.35s ease,box-shadow 0.35s ease;\n}\n#jhdemo_WOSCNG .badge::before {\n  content:'';position:absolute;bottom:-4px;left:8px;\n  width:0;height:0;\n  border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid transparent;\n  transition:border-top-color 0.35s ease;\n}\n#jhdemo_WOSCNG .badge.b-ready {background:#334155;color:rgba(255,255,255,0.72);}\n#jhdemo_WOSCNG .badge.b-ready::before {border-top-color:#334155;}\n#jhdemo_WOSCNG .badge.b-select {background:#F59E0B;color:#1a1000;font-weight:700;}\n#jhdemo_WOSCNG .badge.b-select::before {border-top-color:#F59E0B;}\n#jhdemo_WOSCNG .badge.b-ai {background:linear-gradient(135deg,#3B82F6,#6366F1);color:#fff;}\n#jhdemo_WOSCNG .badge.b-ai::before {border-top-color:#3B82F6;}\n#jhdemo_WOSCNG .badge.b-resume {background:#2563EB;color:#fff;}\n#jhdemo_WOSCNG .badge.b-resume::before {border-top-color:#2563EB;}\n#jhdemo_WOSCNG .badge.b-done {background:rgba(16,185,129,0.88);color:#fff;box-shadow:0 0 8px rgba(16,185,129,0.2);}\n#jhdemo_WOSCNG .badge.b-done::before {border-top-color:rgba(16,185,129,0.88);}\n\n#jhdemo_WOSCNG .form-input {width:100%;height:26px;padding:0 10px;background:#fff;border:1px solid #d1d5db;border-radius:6px;font-size:12px;color:#111827;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.35s,box-shadow 0.35s,background 0.35s;}\n#jhdemo_WOSCNG .form-input.filled {border-color:rgba(34,197,94,0.55);background:rgba(240,253,244,0.75);box-shadow:0 0 0 3px rgba(34,197,94,0.1);}\n\n#jhdemo_WOSCNG .form-textarea {width:100%;min-height:68px;height:auto;padding:8px 10px;background:#fff;border:1px solid #d1d5db;border-radius:6px;font-size:12px;color:#111827;font-family:'Inter',sans-serif;outline:none;resize:none;line-height:1.55;overflow:hidden;transition:border-color 0.35s,box-shadow 0.35s,background 0.35s;}\n#jhdemo_WOSCNG .form-textarea.filled {border-color:rgba(34,197,94,0.55);background:rgba(240,253,244,0.75);box-shadow:0 0 0 3px rgba(34,197,94,0.1);}\n\n#jhdemo_WOSCNG .upload-zone {border:1.5px dashed #cbd5e1;border-radius:8px;background:#fff;padding:6px;text-align:center;transition:border-color 0.35s,background 0.35s,box-shadow 0.35s;}\n#jhdemo_WOSCNG .upload-zone-icon {font-size:18px;margin-bottom:3px;color:#9ca3af;}\n#jhdemo_WOSCNG .upload-zone-text {font-size:11px;color:#9ca3af;}\n#jhdemo_WOSCNG .upload-zone-text span {color:#2563eb;font-weight:500;}\n#jhdemo_WOSCNG .upload-zone-sub {font-size:9.5px;color:#c0c7d0;margin-top:2px;}\n#jhdemo_WOSCNG .upload-zone.filled {border-color:rgba(34,197,94,0.55);border-style:solid;background:rgba(240,253,244,0.75);box-shadow:0 0 0 3px rgba(34,197,94,0.1);}\n#jhdemo_WOSCNG .upload-zone-file {display:none;align-items:center;justify-content:center;gap:7px;}\n#jhdemo_WOSCNG .upload-zone.filled .upload-zone-idle {display:none;}\n#jhdemo_WOSCNG .upload-zone.filled .upload-zone-file {display:flex;}\n#jhdemo_WOSCNG .uf-name {font-size:11px;font-weight:500;color:#15803d;}\n#jhdemo_WOSCNG .uf-check {font-size:13px;color:#22c55e;}\n\n#jhdemo_WOSCNG .pill-row {display:flex;gap:7px;margin-top:1px;}\n#jhdemo_WOSCNG .auth-pill {padding:3px 14px;border-radius:20px;border:1.5px solid #d1d5db;background:#fff;font-size:11.5px;font-weight:500;color:#4b5563;cursor:default;user-select:none;transition:all 0.35s ease;line-height:1;}\n#jhdemo_WOSCNG .auth-pill.selected {border-color:rgba(34,197,94,0.55);background:rgba(240,253,244,0.8);color:#15803d;box-shadow:0 0 0 3px rgba(34,197,94,0.1);}\n\n\/* \u2500\u2500 SIDEBAR \u2500\u2500 *\/\n#jhdemo_WOSCNG .sidebar {width:300px;min-width:300px;background:#0d1117;display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,0.06);box-shadow:-14px 0 40px rgba(0,0,0,0.55);}\n#jhdemo_WOSCNG .sb-brand {padding:9px 13px 7px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}\n#jhdemo_WOSCNG .sb-logo {font-size:12px;font-weight:800;color:#fff;letter-spacing:-0.2px;}\n#jhdemo_WOSCNG .sb-logo .bar {color:#60B0FF;}\n#jhdemo_WOSCNG .sb-active-pill {display:flex;align-items:center;gap:5px;background:rgba(5,84,242,0.1);border:1px solid rgba(5,84,242,0.2);border-radius:12px;padding:3px 9px;}\n#jhdemo_WOSCNG .sb-dot {width:5px;height:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.7);animation:jhdemo_pdot 2s ease-in-out infinite;}\n#jhdemo_WOSCNG .sb-dot-blue {width:5px;height:5px;border-radius:50%;background:#0554F2;box-shadow:0 0 6px rgba(5,84,242,0.7);animation:jhdemo_pdot 2.4s ease-in-out infinite;flex-shrink:0;}\n\n@keyframes jhdemo_pdot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.4;transform:scale(0.65);}}\n\n#jhdemo_WOSCNG .sb-active-text {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:7.5px;font-weight:600;letter-spacing:0.14em;color:rgba(96,176,255,0.65);text-transform:uppercase;}\n\n#jhdemo_WOSCNG .doc-deck {display:flex;gap:6px;padding:7px 11px;border-bottom:1px solid rgba(255,255,255,0.05);flex-shrink:0;}\n#jhdemo_WOSCNG .doc-card {flex:1;background:#161d2b;border:1px solid rgba(255,255,255,0.07);border-radius:6px;padding:5px 8px;display:flex;align-items:center;gap:5px;}\n#jhdemo_WOSCNG .dc-label {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:7.5px;font-weight:600;letter-spacing:0.15em;color:rgba(255,255,255,0.88);text-transform:uppercase;flex:1;}\n#jhdemo_WOSCNG .dc-arr {font-size:9.5px;color:#60B0FF;}\n\n#jhdemo_WOSCNG .fields-panel {flex:0 0 auto;margin:5px 9px 6px;background:#111827;border:1px solid #374151;border-radius:10px;display:flex;flex-direction:column;overflow:hidden;}\n#jhdemo_WOSCNG .fp-bar {padding:5px 11px;background:rgba(31,41,55,0.65);border-bottom:1px solid rgba(55,65,81,0.5);text-align:center;flex-shrink:0;}\n#jhdemo_WOSCNG .fp-bar-text {font-family:'Geist Mono','JetBrains Mono',monospace;font-size:7.5px;font-weight:500;letter-spacing:0.1em;color:rgba(255,255,255,0.88);transition:color 0.4s ease;}\n\n#jhdemo_WOSCNG .fp-grid {display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px;overflow:hidden;min-width:0;align-content:start;}\n\n#jhdemo_WOSCNG .fcard {background:#1f2937;border:1px solid rgba(255,255,255,0.06);border-radius:6px;padding:5px 7px 8px;transition:border-color 0.4s ease,box-shadow 0.4s ease,background 0.4s ease;min-width:0;overflow:hidden;}\n#jhdemo_WOSCNG .fcard.done {border-color:rgba(34,197,94,0.22);}\n#jhdemo_WOSCNG .fcard.span2 {grid-column:span 2;}\n\n#jhdemo_WOSCNG .fc-label {font-size:7.5px;font-weight:600;color:rgba(255,255,255,0.88);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:4px;}\n#jhdemo_WOSCNG .fc-val-row {display:flex;align-items:center;gap:4px;}\n#jhdemo_WOSCNG .fc-input {flex:1;background:#111827;border:1px solid #374151;border-radius:4px;padding:2px 5px;font-size:9.5px;color:rgba(255,255,255,0.65);font-family:'Inter',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;transition:color 0.3s,border-color 0.35s;}\n#jhdemo_WOSCNG .fc-check {font-size:9.5px;font-weight:700;color:#22c55e;opacity:0;transition:opacity 0.35s ease;flex-shrink:0;}\n#jhdemo_WOSCNG .fcard.done .fc-check {opacity:1;}\n\n#jhdemo_WOSCNG .fcard.sel-type {border:1px dashed rgba(232,135,14,0.38);background:rgba(31,41,55,0.45);}\n#jhdemo_WOSCNG .fcard.sel-type.done {border:1px solid rgba(34,197,94,0.22);background:#1f2937;}\n\n#jhdemo_WOSCNG .fcard.resume-type {border:1px solid rgba(37,99,235,0.28);background:rgba(37,99,235,0.06);}\n#jhdemo_WOSCNG .fcard.resume-type .fc-input {color:rgba(96,176,255,0.55);font-style:italic;font-size:8.5px;}\n#jhdemo_WOSCNG .fcard.resume-type.done {border-color:rgba(34,197,94,0.22);background:#1f2937;}\n#jhdemo_WOSCNG .fcard.resume-type.done .fc-input {color:rgba(255,255,255,0.65);font-style:normal;font-size:9.5px;}\n\n#jhdemo_WOSCNG .fcard.ai-type {border:1px solid rgba(99,102,241,0.28);background:rgba(99,102,241,0.04);padding:3px 5px 2px;}\n#jhdemo_WOSCNG .fcard.ai-type.done {border-color:rgba(34,197,94,0.22);}\n\n#jhdemo_WOSCNG .fc-textarea {width:100%;min-height:18px;max-height:120px;height:34px;background:#111827;border:1px solid #374151;border-radius:4px;padding:3px 5px;font-size:8.5px;color:rgba(255,255,255,0.55);font-family:'Inter',sans-serif;resize:none;line-height:1.4;margin-bottom:1px;overflow:hidden;transition:border-color 0.35s;}\n\n#jhdemo_WOSCNG .ask-ai-btn {width:100%;height:23px;background:linear-gradient(135deg,#3B82F6,#6366F1);border:none;border-radius:5px;color:#fff;font-family:'Inter',sans-serif;font-size:8.5px;font-weight:700;letter-spacing:0.06em;cursor:default;position:relative;overflow:hidden;transition:opacity 0.3s;}\n\n@keyframes jhdemo_shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}\n\n#jhdemo_WOSCNG .ask-ai-btn.generating {background:linear-gradient(135deg,#3B82F6 0%,#6366F1 40%,#60B0FF 60%,#3B82F6 100%);background-size:200% 100%;animation:jhdemo_shimmer 1.4s ease infinite;}\n#jhdemo_WOSCNG .ask-ai-btn.recreate {background:transparent;border:1px solid rgba(99,102,241,0.35);color:rgba(99,102,241,0.7);}\n\n@keyframes jhdemo_push-flash{\n  0%{border-color:rgba(34,197,94,0.22);box-shadow:none;}\n  20%{border-color:rgba(5,84,242,0.9);box-shadow:0 0 16px rgba(5,84,242,0.35);}\n  75%{border-color:rgba(5,84,242,0.35);box-shadow:0 0 6px rgba(5,84,242,0.12);}\n  100%{border-color:rgba(34,197,94,0.22);box-shadow:none;}\n}\n@keyframes jhdemo_sel-pulse{\n  0%{border-color:rgba(232,135,14,0.38);box-shadow:none;}\n  45%{border-color:rgba(232,135,14,0.9);box-shadow:0 0 14px rgba(232,135,14,0.25);}\n  100%{border-color:rgba(232,135,14,0.38);box-shadow:none;}\n}\n@keyframes jhdemo_ai-pulse{\n  0%{border-color:rgba(99,102,241,0.28);}\n  40%{border-color:rgba(96,176,255,0.8);box-shadow:0 0 14px rgba(96,176,255,0.2);}\n  100%{border-color:rgba(99,102,241,0.28);}\n}\n\n#jhdemo_WOSCNG .fcard.pushing {animation:jhdemo_push-flash 0.65s ease;}\n#jhdemo_WOSCNG .fcard.sel-pulsing {animation:jhdemo_sel-pulse 0.55s ease;}\n#jhdemo_WOSCNG .fcard.ai-pulsing {animation:jhdemo_ai-pulse 0.6s ease;}\n\n#jhdemo_WOSCNG .notif {display:none;}\n#jhdemo_WOSCNG .notif.visible {opacity:1;transform:translateY(0);}\n#jhdemo_WOSCNG .notif-spark {font-size:9px;flex-shrink:0;color:#F59E0B;}\n#jhdemo_WOSCNG .notif-text {font-size:8.5px;color:#F59E0B;line-height:1;flex:1;}\n#jhdemo_WOSCNG .notif-dots {display:none;}\n#jhdemo_WOSCNG .ndot {width:3px;height:3px;border-radius:50%;background:#F59E0B;animation:jhdemo_ndot 1.2s ease-in-out infinite;}\n#jhdemo_WOSCNG .ndot:nth-child(2) {animation-delay:0.22s;}\n#jhdemo_WOSCNG .ndot:nth-child(3) {animation-delay:0.44s;}\n\n@keyframes jhdemo_ndot{0%,100%{opacity:0.3;transform:scale(0.75);}50%{opacity:1;transform:scale(1.2);}}\n\n#jhdemo_WOSCNG .sb-actions {padding:5px 9px 9px;display:flex;flex-direction:column;gap:4px;flex-shrink:0;}\n#jhdemo_WOSCNG .btn-submit {width:100%;height:36px;background:linear-gradient(180deg,#2563EB 0%,#1D4ED8 100%);border:none;border-radius:8px;color:#fff;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;letter-spacing:-0.01em;box-shadow:0 4px 18px rgba(37,99,235,0.42);cursor:default;position:relative;overflow:hidden;transition:background 0.4s,box-shadow 0.4s,transform 0.15s;}\n#jhdemo_WOSCNG .btn-submit::after {content:'';position:absolute;inset:0;background:rgba(255,255,255,0);transition:background 0.14s;}\n#jhdemo_WOSCNG .btn-submit.clicking {transform:scale(0.97);}\n#jhdemo_WOSCNG .btn-submit.clicking::after {background:rgba(255,255,255,0.18);}\n#jhdemo_WOSCNG .btn-submit.success {background:linear-gradient(180deg,#16a34a 0%,#15803d 100%);box-shadow:0 4px 18px rgba(22,163,74,0.38);}\n#jhdemo_WOSCNG .btn-submit.smarter {background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.25);box-shadow:none;color:#F59E0B;font-size:9.5px;font-weight:600;letter-spacing:0.02em;transition:background 0.4s,box-shadow 0.4s,color 0.3s,border-color 0.3s;height:32px;}\n\n\/* \u2500\u2500 BUTTON CLICK FLASH \u2500\u2500 *\/\n@keyframes jhdemo_btn-flash-anim{\n  0%  {outline:0px solid rgba(255,255,255,0);box-shadow:0 4px 18px rgba(37,99,235,0.42);}\n  28% {outline:3px solid rgba(255,255,255,0.88);box-shadow:0 0 0 5px rgba(255,255,255,0.14),0 4px 24px rgba(255,255,255,0.18);}\n  100%{outline:0px solid rgba(255,255,255,0);box-shadow:0 4px 18px rgba(37,99,235,0.42);}\n}\n\n#jhdemo_WOSCNG .btn-clicked {animation:jhdemo_btn-flash-anim 0.52s ease forwards;}\n\n\/* Mobile-only persistent header \u2014 hidden on desktop *\/\n#jhdemo_WOSCNG .mobile-header {display:none;}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   MOBILE LAYOUT (\u2264720px)\n   Selectors scoped to this component's ID so the rules don't leak.\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media(max-width:720px) {\n\n  #jhdemo_WOSCNG.jh-ext-demo-standalone {\n    aspect-ratio: auto;\n    height: 100svh;\n    max-width: 100%;\n  }\n\n  #jhdemo_WOSCNG .shell{\n    flex-direction:column;\n    height:100%;\n    max-width:100%;\n    border-radius:12px;\n  }\n\n  #jhdemo_WOSCNG .form-side,\n  #jhdemo_WOSCNG .sidebar{\n    position:absolute;\n    inset:0;\n    width:100%;\n    height:100%;\n    transition:transform 0.42s cubic-bezier(0.4,0,0.2,1), opacity 0.42s ease;\n    will-change:transform,opacity;\n  }\n\n  #jhdemo_WOSCNG .form-side{\n    transform:translateX(100%);\n    opacity:0;\n    pointer-events:none;\n  }\n  #jhdemo_WOSCNG .sidebar{\n    transform:translateX(0);\n    opacity:1;\n    pointer-events:auto;\n    width:100%;\n    min-width:0;\n    border-left:none;\n    box-shadow:none;\n  }\n\n  #jhdemo_WOSCNG .shell.show-form .form-side{\n    transform:translateX(0);\n    opacity:1;\n    pointer-events:auto;\n  }\n  #jhdemo_WOSCNG .shell.show-form .sidebar{\n    transform:translateX(-100%);\n    opacity:0;\n    pointer-events:none;\n  }\n\n  #jhdemo_WOSCNG #sim-cursor{display:none!important;}\n\n  #jhdemo_WOSCNG .mobile-header{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    padding:10px 14px 9px;\n    background:#0d1117;\n    border-bottom:1px solid rgba(255,255,255,0.07);\n    flex-shrink:0;\n    position:relative;\n    z-index:10;\n  }\n\n  #jhdemo_WOSCNG .form-side,\n  #jhdemo_WOSCNG .sidebar{\n    top:42px;\n    height:calc(100% - 42px);\n  }\n\n  #jhdemo_WOSCNG .sidebar .sb-brand{display:none;}\n\n  #jhdemo_WOSCNG .fields-panel{margin:8px 10px 0;}\n  #jhdemo_WOSCNG .fp-grid{grid-template-columns:1fr 1fr;}\n  #jhdemo_WOSCNG .field-grid{grid-template-columns:1fr;}\n  #jhdemo_WOSCNG .form-body{padding:14px 14px;}\n  #jhdemo_WOSCNG .doc-deck{padding:10px 14px;}\n  #jhdemo_WOSCNG .btn-submit{font-size:14px;height:42px;}\n}\n<\/style>\n\n<script>\n(function(){\n  var injId = 'jhdemo_WOSCNG-mobile-btn-fix';\n  if (document.getElementById(injId)) return;\n  var s = document.createElement('style');\n  s.id = injId;\n  s.textContent = ''\n    \/* Smarter-state attention: scale-pop entrance + ongoing amber glow pulse *\/\n    + '@keyframes jhdemo_smarter-pop{'\n      + '0%{transform:scale(0.92);opacity:0.55;}'\n      + '55%{transform:scale(1.06);opacity:1;}'\n      + '100%{transform:scale(1);opacity:1;}'\n    + '}'\n    + '@keyframes jhdemo_smarter-glow{'\n      + '0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0);border-color:rgba(245,158,11,0.25);background-color:rgba(245,158,11,0.08);}'\n      + '50%{box-shadow:0 0 0 5px rgba(245,158,11,0.14),0 4px 20px rgba(245,158,11,0.28);border-color:rgba(245,158,11,0.7);background-color:rgba(245,158,11,0.14);}'\n    + '}'\n    + '@media(max-width:720px){'\n    + '#jhdemo_WOSCNG .btn-submit{'\n      + 'width:auto!important;'\n      + 'max-width:280px!important;'\n      + 'margin-left:auto!important;'\n      + 'margin-right:auto!important;'\n      + 'padding-left:28px!important;'\n      + 'padding-right:28px!important;'\n    + '}'\n    + '#jhdemo_WOSCNG .btn-submit.smarter{'\n      + 'width:100%!important;'\n      + 'max-width:none!important;'\n      + 'margin-left:0!important;'\n      + 'margin-right:0!important;'\n      + 'height:42px!important;'\n      + 'animation:jhdemo_smarter-pop 0.6s cubic-bezier(0.34,1.45,0.64,1) both,jhdemo_smarter-glow 2.2s ease-in-out 0.6s infinite!important;'\n    + '}'\n    \/* Hide the auth question on mobile (form-side + sidebar card) *\/\n    + '#jhdemo_WOSCNG .field-auth{display:none!important;}'\n    + '#jhdemo_WOSCNG #c-au{display:none!important;}'\n    \/* Form body: no scroll, slightly tighter padding, and don't grow past content\n       so the submit-row sits flush below the textarea instead of being pushed\n       to the bottom of the (taller-than-viewport) form-side. *\/\n    + '#jhdemo_WOSCNG .form-body{overflow:hidden!important;padding-top:10px!important;padding-bottom:10px!important;flex:0 0 auto!important;}'\n    \/* Compress resume upload: hide arrow + sub-text, smaller padding *\/\n    + '#jhdemo_WOSCNG .upload-zone{padding:7px 10px!important;}'\n    + '#jhdemo_WOSCNG .upload-zone-icon{display:none!important;}'\n    + '#jhdemo_WOSCNG .upload-zone-sub{display:none!important;}'\n    + '#jhdemo_WOSCNG .form-submit-row{'\n      + 'display:block!important;'\n      + 'padding:10px 14px 12px;'\n      + 'background:#fff;'\n      + 'border-top:1px solid #e2e6ec;'\n      \/* Grow into the leftover space below the form content. The button sits at\n         the top of the row via the 10px top padding; the white bg fills below\n         instead of leaving an exposed light-gray gap above a cut-off button. *\/\n      + 'flex:1 0 auto!important;'\n    + '}'\n    + '#jhdemo_WOSCNG .form-submit-btn{'\n      + 'width:100%;'\n      + 'height:40px;'\n      + 'background:linear-gradient(180deg,#2563EB 0%,#1D4ED8 100%);'\n      + 'border:none;'\n      + 'border-radius:6px;'\n      + 'color:#fff;'\n      + 'font-family:\"Inter\",sans-serif;'\n      + 'font-size:13px;'\n      + 'font-weight:700;'\n      + 'letter-spacing:-0.01em;'\n      + 'box-shadow:0 2px 8px rgba(37,99,235,0.3);'\n      + 'cursor:default;'\n      + 'position:relative;'\n      + 'overflow:hidden;'\n      + 'transition:transform 0.15s,box-shadow 0.4s,background 0.4s;'\n    + '}'\n    + '#jhdemo_WOSCNG .form-submit-btn.clicking{transform:scale(0.97);}'\n    + '#jhdemo_WOSCNG .form-submit-btn.success{'\n      + 'background:linear-gradient(180deg,#16a34a 0%,#15803d 100%);'\n      + 'box-shadow:0 2px 8px rgba(22,163,74,0.3);'\n    + '}'\n  + '}';\n  (document.head || document.documentElement).appendChild(s);\n})();\n<\/script>\n\n<script>\n(function(){\n'use strict';\n\n\/* All element IDs are hardcoded inside this shortcode's HTML; they can\n   theoretically collide with the carousel's slide 04 if both shortcodes\n   ever load on the same page. They don't today (extension page renders\n   only this shortcode; homepage carousel renders only its own slide 04).\n   If that ever changes, scope these lookups to within #jhdemo_WOSCNG. *\/\n\nvar ROOT = document.getElementById('jhdemo_WOSCNG');\nif (!ROOT) return;\n\nvar qs = function(sel){ return ROOT.querySelector(sel); };\n\nconst inputs={cp:qs('#f-cp'),ln:qs('#f-ln'),em:qs('#f-em'),ph:qs('#f-ph')};\nconst badges={cp:qs('#b-cp'),ln:qs('#b-ln'),em:qs('#b-em'),ph:qs('#b-ph'),au:qs('#b-au'),rv:qs('#b-rv'),ai:qs('#b-ai')};\nconst cards={cp:qs('#c-cp'),ln:qs('#c-ln'),em:qs('#c-em'),ph:qs('#c-ph'),au:qs('#c-au'),rv:qs('#c-rv'),ai:qs('#c-ai')};\nconst pillYes=qs('#pill-yes');\nconst cAuVal=qs('#c-au-val');\nconst cRvVal=qs('#c-rv-val');\nconst uploadZone=qs('#upload-zone');\nconst formAI=qs('#f-ai');\nconst fcAiText=qs('#fc-ai-text');\nconst askAiBtn=qs('#ask-ai-btn');\nconst btnSubmit=qs('#btn-submit');\nconst formSubmitBtn=qs('#form-submit-btn');\nconst notif=qs('#notif');\nconst fpCounter=qs('#fp-counter');\nconst simCursor=qs('#sim-cursor');\nconst simRipple=qs('#sim-ripple');\nconst shell=qs('.shell');\n\n\/* \u2500\u2500 CURSOR HELPERS \u2500\u2500 *\/\nfunction getPos(el){\n  const er=el.getBoundingClientRect();\n  const sr=shell.getBoundingClientRect();\n  return{ x:er.left-sr.left+er.width\/2, y:er.top-sr.top+er.height\/2 };\n}\nfunction cursorPlace(el){\n  const p=getPos(el);\n  simCursor.style.transition='none';\n  simCursor.style.left=p.x+'px';\n  simCursor.style.top=p.y+'px';\n}\nfunction cursorShow(){\n  requestAnimationFrame(()=>{\n    simCursor.style.transition='opacity 0.28s ease';\n    simCursor.style.opacity='1';\n  });\n}\nfunction cursorMove(el,ms){\n  const p=getPos(el);\n  simCursor.style.transition=`opacity 0.28s ease, left ${ms}ms cubic-bezier(0.4,0,0.2,1), top ${ms}ms cubic-bezier(0.4,0,0.2,1)`;\n  simCursor.style.left=p.x+'px';\n  simCursor.style.top=p.y+'px';\n}\nfunction cursorClick(){\n  simCursor.classList.add('pressing');\n  simRipple.classList.remove('fire');\n  void simRipple.offsetWidth;\n  simRipple.classList.add('fire');\n  setTimeout(()=>simCursor.classList.remove('pressing'),130);\n}\nfunction cursorHide(){\n  simCursor.style.transition='opacity 0.4s ease';\n  simCursor.style.opacity='0';\n}\n\n\/* \u2500\u2500 MOBILE PANEL SWITCHING \u2500\u2500 *\/\nfunction isMobile(){return window.innerWidth<=720;}\nfunction showPanel(which){\n  if(which==='form'){ shell.classList.add('show-form'); }\n  else { shell.classList.remove('show-form'); }\n}\n\nconst FAST_FIELDS=[\n  {key:'ph',value:'Senior Software Engineer', delay:1000},\n  {key:'em',value:'Stripe, Inc.',             delay:1600},\n  {key:'cp',value:'$145,000 \/ year',          delay:2150},\n  {key:'ln',value:'linkedin.com\/in\/sarahchen',delay:2650},\n];\n\nconst AI_TEXT=\"At my previous role, I inherited a distributed cache invalidation bug affecting 15% of users. I traced the root cause to eventual consistency gaps, re-architected the write-through strategy, and reduced critical failures by 94%.\";\nconst CHAR_MS=13;\nconst LOOP_MS=11000;\nconst MOBILE_LOOP_MS=12500;\nlet aiTimer=null;\nlet pendingTimers=[];\n\nfunction schedule(fn, ms){\n  var t = setTimeout(fn, ms);\n  pendingTimers.push(t);\n  return t;\n}\nfunction clearAllTimers(){\n  pendingTimers.forEach(function(t){ clearTimeout(t); });\n  pendingTimers = [];\n  if (aiTimer) { clearInterval(aiTimer); aiTimer = null; }\n}\n\nfunction markDone(badge){badge.className='badge b-done';badge.textContent='\u2713 Done';}\nfunction resizeTA(el){el.style.height='auto';el.style.height=el.scrollHeight+'px';}\nfunction flashBtn(el){\n  el.classList.remove('btn-clicked');\n  void el.offsetWidth;\n  el.classList.add('btn-clicked');\n  schedule(()=>el.classList.remove('btn-clicked'),540);\n}\nfunction pushField(key,value){\n  const c=cards[key],i=inputs[key],b=badges[key];\n  c.classList.add('pushing');\n  schedule(()=>c.classList.remove('pushing'),680);\n  i.value=value;i.classList.add('filled');\n  markDone(b);\n}\nfunction startTyping(target,text,ms,cb){\n  let i=0;\n  aiTimer=setInterval(()=>{\n    i++;\n    target.value=text.slice(0,i);\n    resizeTA(target);\n    if(i>=text.length){clearInterval(aiTimer);aiTimer=null;if(cb)cb();}\n  },ms);\n}\n\nfunction resetAll(){\n  clearAllTimers();\n  Object.values(inputs).forEach(el=>{el.value='';el.classList.remove('filled');});\n  badges.cp.className='badge b-ready';badges.cp.textContent='\u26a1 Ready';\n  badges.ln.className='badge b-ready';badges.ln.textContent='\u26a1 Ready';\n  badges.em.className='badge b-ready';badges.em.textContent='\u26a1 Ready';\n  badges.ph.className='badge b-ready';badges.ph.textContent='\u26a1 Ready';\n  badges.au.className='badge b-select';badges.au.textContent='\u26a0 Select option';\n  badges.rv.className='badge b-resume';badges.rv.textContent='\u2193 Resume';\n  badges.ai.className='badge b-ai';badges.ai.textContent='\u2726 Ask AI';\n  pillYes.classList.remove('selected');\n  cards.au.className='fcard sel-type span2';\n  cAuVal.textContent=\"\u26a0 Select 'Yes' on page\";\n  cAuVal.style.cssText='color:rgba(245,158,11,0.95);font-style:italic;font-size:8.5px;font-weight:700;';\n  cards.rv.className='fcard resume-type span2';\n  cRvVal.textContent='\u2193 Download from profile';\n  uploadZone.classList.remove('filled');\n  formAI.value='';formAI.style.height='';formAI.classList.remove('filled');\n  fcAiText.value='';fcAiText.style.height='';\n  askAiBtn.className='ask-ai-btn';askAiBtn.textContent='\u2726 Ask AI';\n  cards.ai.className='fcard ai-type span2';\n  ['cp','ln','em','ph'].forEach(k=>cards[k].classList.remove('pushing'));\n  btnSubmit.classList.remove('success','clicking','btn-clicked');\n  btnSubmit.textContent = isMobile() ? 'Apply Now' : 'Submit Application';\n  if (formSubmitBtn) {\n    formSubmitBtn.classList.remove('clicking','btn-clicked','success');\n    formSubmitBtn.textContent='Submit Application';\n  }\n  if(notif) notif.classList.remove('visible');\n  btnSubmit.classList.remove('smarter');\n  showPanel('sidebar');\n  fpCounter.textContent = isMobile() ? '\ud83d\udccd 10 fields ready to fill' : '\ud83d\udccd 11 fields ready to fill';\n  fpCounter.style.color='';\n  if (simCursor) simCursor.style.opacity='0';\n}\n\nfunction runLoopDesktop(){\n  cursorPlace(btnSubmit);\n  cursorShow();\n  schedule(()=>cursorMove(btnSubmit,280),350);\n\n  schedule(()=>{\n    cursorClick();\n    flashBtn(btnSubmit);\n    btnSubmit.classList.add('clicking');\n    schedule(()=>btnSubmit.classList.remove('clicking'),230);\n  },600);\n\n  FAST_FIELDS.forEach(f=>schedule(()=>pushField(f.key,f.value),f.delay));\n\n  schedule(()=>{\n    cards.au.classList.add('sel-pulsing');\n    schedule(()=>{\n      cards.au.classList.remove('sel-pulsing');\n      cards.au.classList.add('done');\n      cAuVal.textContent='Yes';\n      cAuVal.style.cssText='color:rgba(255,255,255,0.65);font-style:normal;font-size:9.5px;';\n    },590);\n    pillYes.classList.add('selected');\n    markDone(badges.au);\n  },3150);\n\n  schedule(()=>{\n    cards.rv.classList.add('done');\n    cRvVal.textContent='sarah_chen_resume.pdf';\n    uploadZone.classList.add('filled');\n    markDone(badges.rv);\n  },3750);\n\n  schedule(()=>cursorMove(askAiBtn,400),3900);\n\n  schedule(()=>{\n    cursorClick();\n    flashBtn(askAiBtn);\n    cards.ai.classList.add('ai-pulsing');\n    schedule(()=>cards.ai.classList.remove('ai-pulsing'),640);\n    askAiBtn.className='ask-ai-btn generating';\n    askAiBtn.textContent='\u2726 Generating...';\n    formAI.classList.add('filled');\n    startTyping(fcAiText,AI_TEXT,CHAR_MS,()=>{\n      formAI.value=AI_TEXT;\n      resizeTA(formAI);\n      markDone(badges.ai);\n      cards.ai.classList.add('done');\n      askAiBtn.className='ask-ai-btn recreate';\n      askAiBtn.textContent='\u2726 Recreate';\n    });\n  },4350);\n\n  schedule(()=>{\n    fpCounter.textContent='\u2713 11 of 11 fields filled';\n    fpCounter.style.color='rgba(34,197,94,0.7)';\n  },7600);\n\n  schedule(()=>{\n    flashBtn(btnSubmit);\n    btnSubmit.classList.add('success');\n    btnSubmit.textContent='\u2713 Submitted!';\n  },8100);\n\n  schedule(()=>{ btnSubmit.classList.remove('success'); btnSubmit.classList.add('smarter'); btnSubmit.textContent='\u2726 Getting smarter \u2014 saved 11 fields'; },8700);\n\n  schedule(()=>cursorHide(),9400);\n\n  schedule(()=>{resetAll();schedule(runLoop,500);},LOOP_MS);\n}\n\nfunction runLoopMobile(){\n  \/* PHASE 1 (sidebar): AI generates in the c-ai card. *\/\n  schedule(()=>{\n    flashBtn(askAiBtn);\n    cards.ai.classList.add('ai-pulsing');\n    schedule(()=>cards.ai.classList.remove('ai-pulsing'),640);\n    askAiBtn.className='ask-ai-btn generating';\n    askAiBtn.textContent='\u2726 Generating...';\n    startTyping(fcAiText,AI_TEXT,CHAR_MS,()=>{\n      cards.ai.classList.add('done');\n      askAiBtn.className='ask-ai-btn recreate';\n      askAiBtn.textContent='\u2726 Recreate';\n    });\n  },400);\n\n  \/* PHASE 2 (sidebar): \"Apply Now\" click \u2014 held longer so the press reads on mobile,\n     then a buffer before the panel switch so the user sees the click land. *\/\n  schedule(()=>{\n    flashBtn(btnSubmit);\n    btnSubmit.classList.add('clicking');\n    schedule(()=>btnSubmit.classList.remove('clicking'),380);\n  },3700);\n\n  \/* PHASE 3: switch to the ATS form panel and auto-fill it. *\/\n  schedule(()=>{\n    showPanel('form');\n    formAI.classList.add('filled');\n    const mobileFields=[\n      {key:'ph',value:'Senior Software Engineer', delay:0},\n      {key:'em',value:'Stripe, Inc.',             delay:550},\n      {key:'cp',value:'$145,000 \/ year',          delay:1100},\n      {key:'ln',value:'linkedin.com\/in\/sarahchen',delay:1650},\n    ];\n    mobileFields.forEach(f=>schedule(()=>pushField(f.key,f.value),f.delay));\n    startTyping(formAI,AI_TEXT,CHAR_MS,()=>{ markDone(badges.ai); });\n  },4400);\n\n  \/* Auth question is hidden on mobile \u2014 skip its animation entirely. *\/\n\n  schedule(()=>{\n    cards.rv.classList.add('done');\n    cRvVal.textContent='sarah_chen_resume.pdf';\n    uploadZone.classList.add('filled');\n    markDone(badges.rv);\n  },7500);\n\n  schedule(()=>{\n    fpCounter.textContent='\u2713 10 of 10 fields filled';\n    fpCounter.style.color='rgba(34,197,94,0.7)';\n  },7900);\n\n  \/* PHASE 4 (form): the form's own submit \u2014 this is the actual application submission. *\/\n  schedule(()=>{\n    flashBtn(formSubmitBtn);\n    formSubmitBtn.classList.add('clicking');\n    schedule(()=>formSubmitBtn.classList.remove('clicking'),350);\n  },8300);\n\n  schedule(()=>{\n    formSubmitBtn.classList.add('success');\n    formSubmitBtn.textContent='\u2713 Submitted!';\n  },8650);\n\n  \/* PHASE 5: back to sidebar \u2014 straight into \"Getting smarter\u2026\" (skip Submitted! on btnSubmit). *\/\n  schedule(()=>showPanel('sidebar'),9650);\n\n  schedule(()=>{\n    btnSubmit.classList.add('smarter');\n    btnSubmit.textContent='\u2726 Getting smarter \u2014 saved 10 fields';\n  },9750);\n\n  schedule(()=>{resetAll();schedule(runLoop,500);},MOBILE_LOOP_MS);\n}\n\nfunction runLoop(){\n  if(isMobile()) runLoopMobile();\n  else runLoopDesktop();\n}\n\n\/* \u2500\u2500 Trigger: animate while at least 30% of the wrapper is in viewport.\n   Replaces the carousel's MutationObserver-on-aria-hidden pattern. \u2500\u2500 *\/\nvar extRunning = false;\n\nfunction extStart(){\n  if (extRunning) return;\n  extRunning = true;\n  resetAll();\n  schedule(runLoop, 400);\n}\nfunction extStop(){\n  if (!extRunning) return;\n  extRunning = false;\n  resetAll();\n}\n\nif ('IntersectionObserver' in window) {\n  new IntersectionObserver(function(entries){\n    entries.forEach(function(entry){\n      if (entry.isIntersecting) extStart();\n      else extStop();\n    });\n  }, { threshold: 0.3 }).observe(ROOT);\n} else {\n  \/* Fallback for the rare environment without IntersectionObserver \u2014 just run. *\/\n  extStart();\n}\n\n})();\n<\/script>\n        <\/div>\n    <\/div>\n\n<\/section>\n\n<style>\n\/* Anchor for future property-value modifications to existing selectors.\n   Brand-new selectors must NOT be added here (server-side optimizer\n   tree-shakes new selectors out of inline style blocks). All new rules\n   are JS-injected below. *\/\n#jh_es_Qch7Fw {}\n<\/style>\n\n<script>\n(function () {\n    var injectId = 'jh-es-injected-jh_es_Qch7Fw';\n    if (document.getElementById(injectId)) return;\n    var s = document.createElement('style');\n    s.id = injectId;\n    s.textContent = [\n        \/* Section shell \u2014 full-bleed escape from any constraining parent *\/\n        '#jh_es_Qch7Fw.jh-es-section{',\n            'position:relative;',\n            'box-sizing:border-box;',\n            'width:100vw;',\n            'margin-left:50%;',\n            'transform:translateX(-50%);',\n            'padding:80px 24px;',\n            'background:#030303;',\n            'color:#fff;',\n            'overflow:hidden;',\n        '}',\n        '#jh_es_Qch7Fw.jh-es-section *{box-sizing:border-box;}',\n\n        \/* Centered header column *\/\n        '#jh_es_Qch7Fw .jh-es-section-header{',\n            'max-width:880px;',\n            'margin:0 auto 56px;',\n            'text-align:center;',\n            'padding:0 24px;',\n            'display:flex;',\n            'flex-direction:column;',\n            'align-items:center;',\n        '}',\n\n        \/* Mono eyebrow \u2014 agent-blue, 0.18em letter-spacing *\/\n        '#jh_es_Qch7Fw .jh-es-eyebrow{',\n            \"font-family:'Geist Mono','JetBrains Mono',monospace;\",\n            'font-size:11px;',\n            'font-weight:600;',\n            'letter-spacing:0.18em;',\n            'text-transform:uppercase;',\n            'color:rgba(96,176,255,0.85);',\n            'margin-bottom:18px;',\n        '}',\n\n        \/* Headline \u2014 flex row of countdown beats with size and opacity decay.\n           Beats animate in via stagger when the section header enters viewport\n           (IntersectionObserver below adds .is-visible to .jh-es-section-header). *\/\n        '#jh_es_Qch7Fw .jh-es-headline{',\n            'display:flex;',\n            'flex-wrap:wrap;',\n            'justify-content:center;',\n            'align-items:baseline;',\n            'gap:14px;',\n            'margin:0 0 18px;',\n            'color:rgba(255,255,255,0.95);',\n        '}',\n        \/* Beat base \u2014 initial hidden state, transitions, brand typography *\/\n        '#jh_es_Qch7Fw .jh-es-beat{',\n            \"font-family:'Inter Tight','Inter',sans-serif;\",\n            'font-weight:800;',\n            'letter-spacing:-0.02em;',\n            'line-height:1.05;',\n            'display:inline-block;',\n            'opacity:0;',\n            'transform:translateY(10px);',\n            'transition:opacity 480ms cubic-bezier(0.4,0,0.2,1), transform 480ms cubic-bezier(0.4,0,0.2,1);',\n        '}',\n        \/* Per-beat font sizes \u2014 decreasing 60\u219246\u219232, then Apply. pops back up to 40 *\/\n        '#jh_es_Qch7Fw .jh-es-beat-1{font-size:clamp(38px,4.4vw,60px);}',\n        '#jh_es_Qch7Fw .jh-es-beat-2{font-size:clamp(30px,3.4vw,46px);}',\n        '#jh_es_Qch7Fw .jh-es-beat-3{font-size:clamp(22px,2.4vw,32px);}',\n        '#jh_es_Qch7Fw .jh-es-beat-go{font-size:clamp(28px,2.9vw,40px);}',\n        \/* Green payoff accent \u2014 applied to the go beat (and any other element with this class) *\/\n        '#jh_es_Qch7Fw .jh-es-headline-accent{color:#22c55e;}',\n        \/* Reveal state \u2014 staggered transition delays land the countdown rhythm.\n           0 \/ 200 \/ 400 \/ 650ms \u2014 the longer pause before \"Apply.\" mimics the\n           \"...one... <beat> ...go!\" cadence of a launch countdown. *\/\n        '#jh_es_Qch7Fw .jh-es-section-header.is-visible .jh-es-beat-1{opacity:1;transform:translateY(0);transition-delay:0ms;}',\n        '#jh_es_Qch7Fw .jh-es-section-header.is-visible .jh-es-beat-2{opacity:0.85;transform:translateY(0);transition-delay:200ms;}',\n        '#jh_es_Qch7Fw .jh-es-section-header.is-visible .jh-es-beat-3{opacity:0.65;transform:translateY(0);transition-delay:400ms;}',\n        '#jh_es_Qch7Fw .jh-es-section-header.is-visible .jh-es-beat-go{opacity:1;transform:translateY(0);transition-delay:650ms;}',\n        \/* Reduced motion \u2014 show all beats immediately at their final state *\/\n        '@media(prefers-reduced-motion:reduce){',\n            '#jh_es_Qch7Fw .jh-es-beat{opacity:1;transform:none;transition:none;}',\n            '#jh_es_Qch7Fw .jh-es-beat-2{opacity:0.85;}',\n            '#jh_es_Qch7Fw .jh-es-beat-3{opacity:0.65;}',\n        '}',\n\n        \/* Sub-deck \u2014 Inter, 60% white, 720px cap *\/\n        '#jh_es_Qch7Fw .jh-es-sub{',\n            \"font-family:'Inter Tight','Inter',sans-serif;\",\n            'font-size:14.5px;',\n            'font-weight:400;',\n            'line-height:1.55;',\n            'color:rgba(255,255,255,0.6);',\n            'margin:0 auto 22px;',\n            'max-width:720px;',\n        '}',\n\n        \/* Stage \u2014 outer container that centers the HUD frame *\/\n        '#jh_es_Qch7Fw .jh-es-stage{',\n            'max-width:1080px;',\n            'margin:0 auto;',\n            'display:flex;',\n            'justify-content:center;',\n        '}',\n\n        \/* HUD frame \u2014 translucent panel with corner accents and inset blue glow.\n           Pattern lifted from combined-signal-table jh-diagnostic-card. *\/\n        '#jh_es_Qch7Fw .jh-es-hud{',\n            'position:relative;',\n            'width:100%;',\n            'max-width:960px;',\n            'margin:0 auto;',\n            'padding:14px;',\n            'border:1px solid rgba(255,255,255,0.08);',\n            'border-radius:18px;',\n            'background:rgba(5,84,242,0.04);',\n            'box-shadow:inset 0 0 24px rgba(5,84,242,0.18), 0 30px 80px rgba(0,0,0,0.55);',\n            '-webkit-backdrop-filter:blur(20px);',\n            'backdrop-filter:blur(20px);',\n        '}',\n        \/* Four corner accent segments \u2014 44px brand-blue brackets at each corner,\n           3px thick, with brand-blue drop-shadow glow so they read as \"powered HUD.\" *\/\n        '#jh_es_Qch7Fw .jh-es-hud::before{',\n            'content:\"\";',\n            'position:absolute;',\n            'inset:0;',\n            'pointer-events:none;',\n            'z-index:5;',\n            'border-radius:inherit;',\n            'filter:drop-shadow(0 0 10px rgba(5,84,242,0.6));',\n            'background:',\n                'linear-gradient(to right,#0554F2 3px,transparent 3px) 0 0\/44px 3px no-repeat,',\n                'linear-gradient(to bottom,#0554F2 3px,transparent 3px) 0 0\/3px 44px no-repeat,',\n                'linear-gradient(to left,#0554F2 3px,transparent 3px) 100% 0\/44px 3px no-repeat,',\n                'linear-gradient(to bottom,#0554F2 3px,transparent 3px) 100% 0\/3px 44px no-repeat,',\n                'linear-gradient(to right,#0554F2 3px,transparent 3px) 0 100%\/44px 3px no-repeat,',\n                'linear-gradient(to top,#0554F2 3px,transparent 3px) 0 100%\/3px 44px no-repeat,',\n                'linear-gradient(to left,#0554F2 3px,transparent 3px) 100% 100%\/44px 3px no-repeat,',\n                'linear-gradient(to top,#0554F2 3px,transparent 3px) 100% 100%\/3px 44px no-repeat;',\n        '}',\n\n        \/* Widen the demo: override its built-in max-width:720px so it fills the\n           HUD frame (which is 960px max minus 28px padding = 932px content width).\n           Specificity (1 ID + 2 classes) beats demo file s rule (1 ID + 1 class). *\/\n        '#jh_es_Qch7Fw.jh-es-section .jh-ext-demo-standalone{',\n            'max-width:100%;',\n        '}',\n\n        \/* Mobile (\u2264720px) *\/\n        '@media(max-width:720px){',\n            '#jh_es_Qch7Fw.jh-es-section{padding:56px 16px;}',\n            '#jh_es_Qch7Fw .jh-es-section-header{margin:0 auto 36px;padding:0 8px;}',\n            \/* Headline reflows to vertical stack \u2014 countdown reads as a list cadence *\/\n            '#jh_es_Qch7Fw .jh-es-headline{flex-direction:column;gap:6px;align-items:center;}',\n            '#jh_es_Qch7Fw .jh-es-beat-1{font-size:30px;}',\n            '#jh_es_Qch7Fw .jh-es-beat-2{font-size:25px;}',\n            '#jh_es_Qch7Fw .jh-es-beat-3{font-size:20px;}',\n            '#jh_es_Qch7Fw .jh-es-beat-go{font-size:26px;}',\n            '#jh_es_Qch7Fw .jh-es-sub{font-size:13.5px;}',\n            '#jh_es_Qch7Fw .jh-es-stage{max-width:100%;}',\n            \/* HUD: tighter padding, shorter corner brackets on small screens.\n               Same 3px thickness but reduced 30px length and softer glow. *\/\n            '#jh_es_Qch7Fw .jh-es-hud{padding:8px;border-radius:14px;}',\n            '#jh_es_Qch7Fw .jh-es-hud::before{',\n                'filter:drop-shadow(0 0 6px rgba(5,84,242,0.5));',\n                'background:',\n                    'linear-gradient(to right,#0554F2 3px,transparent 3px) 0 0\/30px 3px no-repeat,',\n                    'linear-gradient(to bottom,#0554F2 3px,transparent 3px) 0 0\/3px 30px no-repeat,',\n                    'linear-gradient(to left,#0554F2 3px,transparent 3px) 100% 0\/30px 3px no-repeat,',\n                    'linear-gradient(to bottom,#0554F2 3px,transparent 3px) 100% 0\/3px 30px no-repeat,',\n                    'linear-gradient(to right,#0554F2 3px,transparent 3px) 0 100%\/30px 3px no-repeat,',\n                    'linear-gradient(to top,#0554F2 3px,transparent 3px) 0 100%\/3px 30px no-repeat,',\n                    'linear-gradient(to left,#0554F2 3px,transparent 3px) 100% 100%\/30px 3px no-repeat,',\n                    'linear-gradient(to top,#0554F2 3px,transparent 3px) 100% 100%\/3px 30px no-repeat;',\n            '}',\n        '}',\n\n        \/* ===== Demo label (caption above the HUD) ===== *\/\n        '#jh_es_Qch7Fw .jh-es-demo-label{max-width:760px;margin:0 auto 22px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}',\n        '#jh_es_Qch7Fw .jh-es-demo-tag{display:inline-flex;align-items:center;gap:8px;font-family:\"Geist Mono\",\"JetBrains Mono\",monospace;font-size:10.5px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.6);}',\n        '#jh_es_Qch7Fw .jh-es-chrome-ico{display:inline-flex;width:18px;height:18px;}',\n        '#jh_es_Qch7Fw .jh-es-chrome-ico svg{display:block;width:100%;height:100%;}',\n        '#jh_es_Qch7Fw .jh-es-demo-title{font-family:\"Inter Tight\",\"Inter\",sans-serif;font-size:clamp(20px,2.4vw,26px);font-weight:700;letter-spacing:-0.01em;line-height:1.2;margin:0;color:#fff;}',\n        '#jh_es_Qch7Fw .jh-es-demo-chips{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;}',\n        '#jh_es_Qch7Fw .jh-es-demo-chips li{font-family:\"Geist Mono\",\"JetBrains Mono\",monospace;font-size:11px;font-weight:500;letter-spacing:0.02em;color:rgba(255,255,255,0.78);background:rgba(5,84,242,0.10);border:1px solid rgba(96,176,255,0.28);border-radius:999px;padding:6px 12px;}',\n\n        \/* ===== Faux Chrome browser bar on the HUD ===== *\/\n        '#jh_es_Qch7Fw .jh-es-browserbar{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:12px;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);}',\n        '#jh_es_Qch7Fw .jh-es-bb-chrome{display:inline-flex;flex:0 0 auto;width:16px;height:16px;}',\n        '#jh_es_Qch7Fw .jh-es-bb-chrome svg{display:block;width:100%;height:100%;}',\n        '#jh_es_Qch7Fw .jh-es-bb-addr{flex:1 1 auto;min-width:0;display:inline-flex;align-items:center;gap:7px;font-family:\"Geist Mono\",\"JetBrains Mono\",monospace;font-size:11.5px;color:rgba(255,255,255,0.7);background:rgba(0,0,0,0.35);border:1px solid rgba(255,255,255,0.07);border-radius:7px;padding:6px 12px;}',\n        '#jh_es_Qch7Fw .jh-es-bb-lock{display:inline-flex;flex:0 0 auto;width:11px;height:11px;color:rgba(120,255,180,0.85);}',\n        '#jh_es_Qch7Fw .jh-es-bb-lock svg{display:block;width:100%;height:100%;}',\n        '#jh_es_Qch7Fw .jh-es-bb-url{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;}',\n        '#jh_es_Qch7Fw .jh-es-bb-kebab{flex:0 0 auto;color:rgba(255,255,255,0.5);font-size:16px;line-height:1;}',\n\n        \/* Mobile (\u2264720px) \u2014 demo label + browser bar *\/\n        '@media(max-width:720px){',\n            '#jh_es_Qch7Fw .jh-es-demo-label{margin:0 auto 16px;gap:8px;}',\n            '#jh_es_Qch7Fw .jh-es-demo-title{font-size:18px;}',\n            '#jh_es_Qch7Fw .jh-es-demo-chips{gap:6px;}',\n            '#jh_es_Qch7Fw .jh-es-demo-chips li{font-size:10px;padding:5px 10px;}',\n            '#jh_es_Qch7Fw .jh-es-browserbar{gap:7px;padding:7px 9px;margin-bottom:10px;}',\n            '#jh_es_Qch7Fw .jh-es-bb-addr{font-size:10px;padding:5px 9px;gap:5px;}',\n        '}'\n    ].join('');\n    (document.head || document.documentElement).appendChild(s);\n\n    \/\/ Countdown stagger: when the section header enters viewport, add\n    \/\/ .is-visible to trigger the per-beat transition-delay reveal cascade.\n    \/\/ Fires once and disconnects \u2014 re-scrolling does not replay.\n    var hdr = document.querySelector('#jh_es_Qch7Fw .jh-es-section-header');\n    if (!hdr) return;\n    if (!('IntersectionObserver' in window)) {\n        hdr.classList.add('is-visible');\n        return;\n    }\n    var obs = new IntersectionObserver(function (entries) {\n        for (var i = 0; i < entries.length; i++) {\n            if (entries[i].isIntersecting) {\n                hdr.classList.add('is-visible');\n                obs.disconnect();\n                return;\n            }\n        }\n    }, { threshold: 0.2 });\n    obs.observe(hdr);\n})();\n<\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8ac8818 elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"8ac8818\" data-element_type=\"section\" data-e-type=\"section\" id=\"elementor-widget-container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-fe3a454 exad-sticky-section-no\" data-id=\"fe3a454\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-9a890f0 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"9a890f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\r\n<div id=\"jh_resume_d4fm6S\" class=\"jh-resume-wrapper\" role=\"region\" aria-label=\"Resume Templates\" data-jh-component=\"Resume\">\r\n    <div class=\"jh-resume-bg-glow\"><\/div>\r\n\r\n    <div class=\"jh-resume-container\">\r\n        <!-- Header Section -->\r\n        <div class=\"jh-resume-header\">\r\n            <span class=\"jh-resume-label mono uppercase\">&#9654; ATS-Ready Resume Templates<\/span>\r\n            <h1 class=\"jh-resume-title\">\r\n                Top <span class=\"gradient-text\">Performing<\/span> Templates\r\n            <\/h1>\r\n            <p class=\"jh-resume-subtitle mono\">Built to pass ATS filters and reach a recruiter.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"jh-resume-showcase\">\r\n            <!-- Left: Resume Preview with Dynamic Frame Swap & Scan -->\r\n            <div class=\"jh-resume-preview-area\">\r\n                <div class=\"jh-resume-3d-wrap\">\r\n                    <div class=\"jh-resume-card\" id=\"jh_resume_d4fm6S_card\">\r\n                        <!-- Scanning Light Bar -->\r\n                        <div class=\"jh-scan-bar\"><\/div>\r\n\r\n                        <!-- Resume Frame Stack (Pre-loading & Layering) -->\r\n                        <div class=\"jh-resume-img-container\">\r\n                            <!-- High-performance z-index stack -->\r\n                            <div class=\"jh-resume-frame frame-1\">\r\n                                <img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"600\" src=\"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/03\/1.webp\" alt=\"Frame 1\" class=\"jh-frame-img\" loading=\"lazy\">\r\n                            <\/div>\r\n                            <div class=\"jh-resume-frame frame-2\">\r\n                                <img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"600\" src=\"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/03\/2.webp\" alt=\"Frame 2\" class=\"jh-frame-img\" loading=\"lazy\">\r\n                            <\/div>\r\n                            <div class=\"jh-resume-frame frame-3 active\">\r\n                                <img fetchpriority=\"high\" decoding=\"async\" width=\"450\" height=\"600\" src=\"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/03\/3.webp\" alt=\"Frame 3\" class=\"jh-frame-img\" loading=\"eager\">\r\n                            <\/div>\r\n                            <div class=\"jh-resume-frame frame-4\">\r\n                                <img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"600\" src=\"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/03\/4.webp\" alt=\"Frame 4\" class=\"jh-frame-img\" loading=\"lazy\">\r\n                            <\/div>\r\n                            <div class=\"jh-resume-frame frame-5\">\r\n                                <img loading=\"lazy\" decoding=\"async\" width=\"450\" height=\"600\" src=\"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/03\/5.webp\" alt=\"Frame 5\" class=\"jh-frame-img\" loading=\"lazy\">\r\n                            <\/div>\r\n\r\n                            <!-- Hotspots (Translation mapped in JS) -->\r\n                        <button class=\"jh-hotspot spot-1\" data-tooltip=\"DATA_POINT: OPTIMIZED\" aria-label=\"Optimization Point 1\"><\/button>\r\n                        <button class=\"jh-hotspot spot-2\" data-tooltip=\"SEMANTIC_MATCH: HIGH\" aria-label=\"Optimization Point 2\"><\/button>\r\n                        <button class=\"jh-hotspot spot-3\" data-tooltip=\"VISIBILITY_SCORE: 98%\" aria-label=\"Optimization Point 3\"><\/button>\r\n                        <\/div>\r\n\r\n                        <!-- Hover UI Tooltip -->\r\n                        <div class=\"jh-resume-tooltip mono\">DATA_POINT: OPTIMIZED<\/div>\r\n                    <\/div>\r\n                    <!-- Ambient Shadow -->\r\n                    <div class=\"jh-resume-shadow\" id=\"jh_resume_d4fm6S_shadow\"><\/div>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Right: Diagnostic Readout + Systems Wall + CTA -->\r\n            <div class=\"jh-resume-controls\">\r\n\r\n                <div class=\"jh-diag-readout\">\r\n                    <div class=\"jh-diag-header mono\">ATS_PARSE_DIAGNOSTIC<\/div>\r\n                    <div class=\"jh-diag-rows\">\r\n                        <div class=\"jh-diag-row\">\r\n                            <span class=\"jh-diag-label mono\">COMPATIBILITY<\/span>\r\n                            <div class=\"jh-diag-bar\"><div class=\"jh-diag-fill\" data-target=\"100\"><\/div><\/div>\r\n                            <span class=\"jh-diag-val mono\">100%<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-diag-row\">\r\n                            <span class=\"jh-diag-label mono\">PARSE_RATE<\/span>\r\n                            <div class=\"jh-diag-bar\"><div class=\"jh-diag-fill\" data-target=\"98\"><\/div><\/div>\r\n                            <span class=\"jh-diag-val mono\">98%<\/span>\r\n                        <\/div>\r\n                        <div class=\"jh-diag-row\">\r\n                            <span class=\"jh-diag-label mono\">RECRUITER_VIS<\/span>\r\n                            <div class=\"jh-diag-bar\"><div class=\"jh-diag-fill\" data-target=\"94\"><\/div><\/div>\r\n                            <span class=\"jh-diag-val mono\">94%<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"jh-systems-wall\">\r\n                    <div class=\"jh-systems-header\">\r\n                        <p class=\"jh-systems-line-1 mono\">TESTED AGAINST 12 ATS PARSERS<\/p>\r\n                        <p class=\"jh-systems-line-2 mono\">USED BY FORTUNE 500 HIRING TEAMS<\/p>\r\n                    <\/div>\r\n                    <div class=\"jh-systems-grid\">\r\n                        <div class=\"jh-system-badge\">WORKDAY<\/div>\r\n                        <div class=\"jh-system-badge\">LEVER<\/div>\r\n                        <div class=\"jh-system-badge\">GREENHOUSE<\/div>\r\n                        <div class=\"jh-system-badge\">TALEO<\/div>\r\n                        <div class=\"jh-system-badge\">iCIMS<\/div>\r\n                        <div class=\"jh-system-badge\">SAP_SF<\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"jh-cta-area\">\r\n                    <button class=\"jh-bypass-btn\">\r\n                        <span class=\"shimmer\"><\/span>\r\n                        <span class=\"btn-text mono\">BYPASS THE FILTERS<\/span>\r\n                    <\/button>\r\n                    <p class=\"jh-cta-meta mono\">VECTORS_LOADED \/\/ READY_FOR_DEPLOYMENT<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\r\n#jh_resume_d4fm6S, #jh_resume_d4fm6S * { box-sizing: border-box; }\r\n\r\n#jh_resume_d4fm6S {\r\n    --jh-bg: #030303;\r\n    --jh-accent: #0554F2;\r\n    --jh-accent-glow: rgba(5, 84, 242, 0.5);\r\n    --jh-cyan: #0554F2;\r\n    --jh-violet: #a78bfa;\r\n    --jh-text: #60B0FF;\r\n    --jh-text-dim: rgba(255, 255, 255, 0.4);\r\n    --jh-glass-border: rgba(255, 255, 255, 0.1);\r\n}\r\n\r\n#jh_resume_d4fm6S.jh-resume-wrapper {\r\n    background: var(--jh-bg);\r\n    color: var(--jh-text);\r\n    padding: clamp(60px, 8vh, 80px) 20px;\r\n    font-family: 'Inter', sans-serif;\r\n    position: relative;\r\n    min-height: 100vh;\r\n    min-height: 100svh;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-bg-glow {\r\n    position: absolute !important;\r\n    inset: 0 !important;\r\n    background:\r\n        radial-gradient(at 0% 0%, rgba(5, 84, 242, 0.2) 0px, transparent 55%),\r\n        radial-gradient(at 100% 0%, rgba(96, 176, 255, 0.12) 0px, transparent 50%),\r\n        radial-gradient(at 50% 100%, rgba(5, 84, 242, 0.15) 0px, transparent 50%) !important;\r\n    filter: blur(80px) !important;\r\n    opacity: 0.8 !important;\r\n    pointer-events: none !important;\r\n    z-index: 0 !important;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-label {\r\n    display: inline-block !important;\r\n    width: fit-content !important;\r\n    font-family: 'Geist Mono', 'JetBrains Mono', monospace !important;\r\n    font-size: 11px !important; \/* canonical eyebrow size (was clamp 10-12) *\/\r\n    letter-spacing: 0.18em !important; \/* canonical (was 0.25em) *\/\r\n    color: rgba(96, 176, 255, 0.85) !important; \/* canonical agent-blue *\/\r\n    text-transform: uppercase !important;\r\n    border: none !important;\r\n    background: transparent !important;\r\n    padding: 0 0 4px 0 !important; \/* Reduced padding *\/\r\n    margin-bottom: 8px !important;  \/* Reduced from 16px to 8px *\/\r\n    text-shadow: none !important; \/* canonical eyebrow has no glow *\/\r\n    line-height: 1 !important;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-container {\r\n    max-width: 1200px;\r\n    width: 100%;\r\n    position: relative;\r\n    z-index: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n}\r\n\r\n#jh_resume_d4fm6S .mono { font-family: 'Geist Mono', 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.2em; }\r\n#jh_resume_d4fm6S .uppercase { text-transform: uppercase; }\r\n\r\n#jh_resume_d4fm6S .jh-resume-header {\r\n    text-align: center;\r\n    margin-bottom: clamp(20px, 3vh, 40px) !important;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-title {\r\n    font-family: 'Inter Tight', sans-serif !important;\r\n    font-size: clamp(32px, 5vw, 42px) !important;\r\n    font-weight: 800 !important;\r\n    line-height: 1.1 !important;\r\n    color: #ffffff !important;\r\n    margin: 0 auto 12px auto !important; \/* Zero top margin to sit closer to label *\/\r\n}\r\n\r\n\r\n#jh_resume_d4fm6S .jh-resume-subtitle {\r\n    color: rgba(255, 255, 255, 0.5);\r\n}\r\n\r\n#jh_resume_d4fm6S .gradient-text {\r\n    background: linear-gradient(90deg, #0554F2, #60B0FF);\r\n    -webkit-background-clip: text;\r\n    -webkit-text-fill-color: transparent;\r\n    display: inline-block; \/* Helps ensure the gradient renders correctly *\/\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-showcase {\r\n    display: grid;\r\n    grid-template-columns: 1fr;\r\n    gap: 40px;\r\n    align-items: center;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-preview-area {\r\n    perspective: 2000px;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-3d-wrap {\r\n    position: relative;\r\n    width: 100%;\r\n    max-width: 450px;\r\n    height: clamp(350px, 60vh, 600px);\r\n    transform-style: preserve-3d;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-card {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: transparent;\r\n    border-radius: 4px;\r\n    overflow: hidden;\r\n    transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);\r\n    z-index: 10;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-shadow {\r\n    position: absolute;\r\n    inset: 5%;\r\n    background: rgba(0,0,0,0.8);\r\n    filter: blur(50px);\r\n    z-index: 1;\r\n    transform: translateZ(-100px);\r\n    transition: all 0.2s ease-out;\r\n    pointer-events: none;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-resume-img-container { position: relative; width: 100%; height: 100%; }\r\n#jh_resume_d4fm6S .jh-resume-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.1s linear; z-index: 1; }\r\n#jh_resume_d4fm6S .jh-resume-frame.active { opacity: 1; z-index: 2; }\r\n#jh_resume_d4fm6S .jh-frame-img { width: 100%; height: 100%; object-fit: contain; background: transparent; }\r\n\r\n#jh_resume_d4fm6S .jh-scan-bar {\r\n    position: absolute;\r\n    top: -5%;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 2px;\r\n    background: var(--jh-cyan);\r\n    box-shadow: 0 0 25px 4px var(--jh-cyan);\r\n    filter: blur(2px);\r\n    opacity: 0.8;\r\n    z-index: 50;\r\n    animation: jh_scan_move 5s infinite linear;\r\n    will-change: top;\r\n}\r\n\r\n@keyframes jh_scan_move { 0% { top: -5%; } 100% { top: 105%; } }\r\n\r\n#jh_resume_d4fm6S .jh-hotspot {\r\n    position: absolute;\r\n    width: 14px;\r\n    height: 14px;\r\n    background: var(--jh-cyan);\r\n    border: none;\r\n    padding: 0;\r\n    border-radius: 50%;\r\n    box-shadow: 0 0 15px var(--jh-cyan);\r\n    cursor: pointer;\r\n    z-index: 60;\r\n    transition: transform 0.1s linear;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-hotspot::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: -6px;\r\n    border: 1px solid var(--jh-cyan);\r\n    border-radius: 50%;\r\n    animation: jh_ping 2s infinite;\r\n}\r\n\r\n@keyframes jh_ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }\r\n\r\n#jh_resume_d4fm6S .jh-resume-tooltip {\r\n    position: absolute;\r\n    background: var(--jh-bg);\r\n    border: 1px solid var(--jh-cyan);\r\n    color: var(--jh-cyan);\r\n    padding: 6px 12px;\r\n    font-size: 10px;\r\n    font-weight: 700;\r\n    border-radius: 4px;\r\n    pointer-events: none;\r\n    opacity: 0;\r\n    z-index: 100;\r\n    transform: translate(-50%, -150%);\r\n    transition: opacity 0.2s;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-format-grid {\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    gap: 20px;\r\n    margin-bottom: 30px;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-format-card {\r\n    background: rgba(255,255,255,0.03);\r\n    backdrop-filter: blur(25px);\r\n    padding: 20px;\r\n    border-radius: 20px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    gap: 15px;\r\n    cursor: default;\r\n    pointer-events: none;\r\n    position: relative;\r\n    transition: 0.3s;\r\n    border: 1px solid transparent;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-format-card.active {\r\n    background: rgba(5, 84, 242, 0.1);\r\n    border-color: rgba(5, 84, 242, 0.3);\r\n    box-shadow: 0 0 30px rgba(5, 84, 242, 0.2), inset 0 0 10px rgba(5, 84, 242, 0.3);\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-format-icon { color: var(--jh-text-dim); transition: 0.3s; }\r\n#jh_resume_d4fm6S .jh-format-card.active .jh-format-icon { color: var(--jh-cyan); }\r\n\r\n#jh_resume_d4fm6S .jh-cta-area { margin-top: 20px; }\r\n\r\n#jh_resume_d4fm6S .jh-bypass-btn {\r\n    width: 100%;\r\n    background: linear-gradient(135deg, #0554F2, #0339a6);\r\n    color: #fff;\r\n    border: 1px solid rgba(255, 255, 255, 0.1);\r\n    padding: 24px;\r\n    border-radius: 14px !important;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: 0.3s;\r\n}\r\n\r\n\r\n#jh_resume_d4fm6S .jh-bypass-btn .btn-text {\r\n    font-size: 14px !important;\r\n    font-weight: 700 !important;\r\n}\r\n\r\n#jh_resume_d4fm6S .jh-bypass-btn:hover {\r\n    background: #0554F2;\r\n    transform: scale(0.98);\r\n    box-shadow: 0 0 40px var(--jh-accent-glow);\r\n}\r\n\r\n#jh_resume_d4fm6S .shimmer {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 50%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);\r\n    transform: translateX(-100%) skewX(-45deg);\r\n    animation: jh_shimmer 4s infinite;\r\n}\r\n\r\n@keyframes jh_shimmer {\r\n    0% { transform: translateX(-100%) skewX(-45deg); }\r\n    30% { transform: translateX(200%) skewX(-45deg); }\r\n    100% { transform: translateX(200%) skewX(-45deg); }\r\n}\r\n\r\n\/* Desktop Overrides *\/\r\n@media (min-width: 1025px) {\r\n    #jh_resume_d4fm6S.jh-resume-wrapper {\r\n        height: 100vh;\r\n        overflow: hidden;\r\n    }\r\n\r\n    #jh_resume_d4fm6S .jh-resume-container {\r\n        min-width: 1000px;\r\n        height: 100%;\r\n        max-height: 900px;\r\n    }\r\n\r\n    #jh_resume_d4fm6S .jh-resume-showcase {\r\n        grid-template-columns: 1fr 400px;\r\n        gap: 80px;\r\n    }\r\n\r\n    #jh_resume_d4fm6S .jh-resume-3d-wrap {\r\n        height: 60vh;\r\n        max-height: 600px;\r\n        min-height: 400px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(function() {\r\n    var injectId = 'jh-resume-readout-jh_resume_d4fm6S';\r\n    if (document.getElementById(injectId)) return;\r\n    var s = document.createElement('style');\r\n    s.id = injectId;\r\n    s.textContent =\r\n        '#jh_resume_d4fm6S .jh-diag-readout {' +\r\n            'background: rgba(5, 84, 242, 0.05);' +\r\n            'border: 1px solid rgba(96, 176, 255, 0.3);' +\r\n            'border-radius: 14px;' +\r\n            'padding: 20px 22px;' +\r\n            'margin-bottom: 24px;' +\r\n            'box-shadow: inset 0 0 18px rgba(5, 84, 242, 0.18);' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-diag-header {' +\r\n            'font-size: 10px;' +\r\n            'color: #60B0FF;' +\r\n            'letter-spacing: 0.22em;' +\r\n            'text-transform: uppercase;' +\r\n            'margin-bottom: 14px;' +\r\n            'text-shadow: 0 0 8px rgba(96, 176, 255, 0.5);' +\r\n            'padding-bottom: 10px;' +\r\n            'border-bottom: 1px solid rgba(96, 176, 255, 0.18);' +\r\n            'font-weight: 700;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-diag-rows {' +\r\n            'display: flex;' +\r\n            'flex-direction: column;' +\r\n            'gap: 12px;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-diag-row {' +\r\n            'display: grid;' +\r\n            'grid-template-columns: 110px 1fr 44px;' +\r\n            'gap: 12px;' +\r\n            'align-items: center;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-diag-label {' +\r\n            'font-size: 10px;' +\r\n            'color: rgba(255, 255, 255, 0.55);' +\r\n            'letter-spacing: 0.18em;' +\r\n            'text-transform: uppercase;' +\r\n            'font-weight: 600;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-diag-bar {' +\r\n            'height: 6px;' +\r\n            'background: rgba(255, 255, 255, 0.08);' +\r\n            'border-radius: 3px;' +\r\n            'overflow: hidden;' +\r\n            'position: relative;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-diag-fill {' +\r\n            'height: 100%;' +\r\n            'background: linear-gradient(90deg, #0554F2 0%, #60B0FF 100%);' +\r\n            'box-shadow: 0 0 8px rgba(96, 176, 255, 0.5);' +\r\n            'border-radius: 3px;' +\r\n            'width: 0;' +\r\n            'transition: width 1.4s cubic-bezier(0.23, 1, 0.32, 1);' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-diag-fill.filled[data-target=\"100\"] { width: 100%; }' +\r\n        '#jh_resume_d4fm6S .jh-diag-fill.filled[data-target=\"98\"] { width: 98%; }' +\r\n        '#jh_resume_d4fm6S .jh-diag-fill.filled[data-target=\"94\"] { width: 94%; }' +\r\n        '#jh_resume_d4fm6S .jh-diag-val {' +\r\n            'font-size: 11px;' +\r\n            'font-weight: 700;' +\r\n            'color: #60B0FF;' +\r\n            'text-align: right;' +\r\n            'text-shadow: 0 0 6px rgba(96, 176, 255, 0.4);' +\r\n            'letter-spacing: 0.05em;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-systems-wall {' +\r\n            'margin-bottom: 24px;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-systems-header {' +\r\n            'text-align: center;' +\r\n            'margin-bottom: 14px;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-systems-line-1 {' +\r\n            'font-size: 10px;' +\r\n            'color: #ffffff;' +\r\n            'font-weight: 700;' +\r\n            'letter-spacing: 0.2em;' +\r\n            'text-transform: uppercase;' +\r\n            'margin: 0 0 4px 0;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-systems-line-2 {' +\r\n            'font-size: 9px;' +\r\n            'color: rgba(255, 255, 255, 0.5);' +\r\n            'letter-spacing: 0.18em;' +\r\n            'text-transform: uppercase;' +\r\n            'margin: 0;' +\r\n            'font-family: \"Geist Mono\", \"JetBrains Mono\", monospace;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-systems-grid {' +\r\n            'display: grid;' +\r\n            'grid-template-columns: 1fr 1fr 1fr;' +\r\n            'gap: 8px;' +\r\n        '}' +\r\n        '#jh_resume_d4fm6S .jh-system-badge {' +\r\n            'font-family: \"Geist Mono\", \"JetBrains Mono\", monospace;' +\r\n            'font-size: 10px;' +\r\n            'font-weight: 700;' +\r\n            'color: rgba(255, 255, 255, 0.85);' +\r\n            'letter-spacing: 0.12em;' +\r\n            'padding: 10px 6px;' +\r\n            'text-align: center;' +\r\n            'background: rgba(5, 84, 242, 0.1);' +\r\n            'border: 1px solid rgba(96, 176, 255, 0.3);' +\r\n            'border-radius: 6px;' +\r\n            'box-shadow: inset 0 0 8px rgba(5, 84, 242, 0.1);' +\r\n        '}' +\r\n        \/* Mobile only: lock the resume preview to frame-3 (the head-on view). *\/\r\n        \/* The JS frame-cycle keeps toggling .active under max-width:1024px, but *\/\r\n        \/* these !important rules pin the visible frame so the image never swaps. *\/\r\n        '@media (max-width: 720px) {' +\r\n            '#jh_resume_d4fm6S .jh-resume-frame { opacity: 0 !important; z-index: 1 !important; }' +\r\n            '#jh_resume_d4fm6S .jh-resume-frame.frame-3 { opacity: 1 !important; z-index: 2 !important; }' +\r\n            \/* Pin the pulse dots to their frame-3 coords so they don't drift over the frozen frame. *\/\r\n            '#jh_resume_d4fm6S .jh-hotspot.spot-1 { left: 24% !important; top: 23% !important; }' +\r\n            '#jh_resume_d4fm6S .jh-hotspot.spot-2 { left: 69% !important; top: 43% !important; }' +\r\n            '#jh_resume_d4fm6S .jh-hotspot.spot-3 { left: 39% !important; top: 73% !important; }' +\r\n        '}';\r\n    (document.head || document.documentElement).appendChild(s);\r\n\r\n    \/\/ Animate the diagnostic bars when the section enters the viewport\r\n    function fillBars() {\r\n        var fills = document.querySelectorAll('#jh_resume_d4fm6S .jh-diag-fill');\r\n        for (var i = 0; i < fills.length; i++) {\r\n            (function(el, delay) {\r\n                setTimeout(function() { el.classList.add('filled'); }, delay);\r\n            })(fills[i], i * 180);\r\n        }\r\n    }\r\n    var section = document.getElementById('jh_resume_d4fm6S');\r\n    if (section && 'IntersectionObserver' in window) {\r\n        var io = new IntersectionObserver(function(entries) {\r\n            entries.forEach(function(entry) {\r\n                if (entry.isIntersecting) {\r\n                    io.disconnect();\r\n                    fillBars();\r\n                }\r\n            });\r\n        }, { threshold: 0.25 });\r\n        io.observe(section);\r\n    } else {\r\n        fillBars();\r\n    }\r\n})();\r\n<\/script>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-25475d5 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"25475d5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section id=\"jh_ps_8F6fQE\" class=\"jh-ps\" data-jh-section=\"proof-strip\" role=\"region\" aria-label=\"Proof \u2014 recruiter signals and outcomes\">\n    <div class=\"jh-ps-inner\">\n\n        <header class=\"jh-ps-header\">\n            <span class=\"jh-ps-eyebrow jh-mono\">&#9654; What recruiters scan for &mdash; and who passes<\/span>\n            <h2 class=\"jh-ps-headline\">We asked 200 recruiters. Then <span class=\"jh-ps-accent\">50,000 candidates<\/span> did something about it.<\/h2>\n        <\/header>\n\n        <div class=\"jh-ps-main\">\n        <div class=\"jh-ps-demo\">\n            <div class=\"jh-ps-demo-viewport\">\n                <div class=\"jh-ps-demo-hud\">\n                    <span class=\"jh-ps-demo-hud-left\"><span class=\"jh-ps-demo-dot\" aria-hidden=\"true\"><\/span>SIGNAL_SOURCE: <span class=\"jh-ps-demo-glow\">CAREER_OPTIMIZER_v2<\/span><\/span>\n                    <span class=\"jh-ps-demo-hud-right\">SCAN: <span class=\"jh-ps-demo-glow\">ACTIVE<\/span><\/span>\n                <\/div>\n                <div class=\"jh-ps-demo-frame\">\n                    <video autoplay muted loop playsinline preload=\"none\" class=\"jh-ps-demo-video\" aria-label=\"Resume tailoring demo\" data-poster=\"https:\/\/www.justhired.ai\/wp-content\/uploads\/2026\/01\/who-framed-roger-rabbit.webp\">\n                        <source src=\"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2026\/01\/Resume-Trasformer-180-h264.mp4\" type=\"video\/mp4\">\n                    <\/video>\n                    <div class=\"jh-ps-demo-scanline\" aria-hidden=\"true\"><\/div>\n                <\/div>\n                <div class=\"jh-ps-demo-hud\">\n                    <span class=\"jh-ps-demo-hud-left\">ALIGNING_PROFESSIONAL_SIGNALS&hellip;<\/span>\n                    <span class=\"jh-ps-demo-hud-right\">STATUS: <span class=\"jh-ps-demo-glow\">[STRONG]<\/span><\/span>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"jh-ps-cols\">\n\n            <article class=\"jh-ps-col jh-ps-col--problem\">\n                <div class=\"jh-ps-col-eyebrow jh-mono\">The Problem<\/div>\n                <blockquote class=\"jh-ps-quote\">\n                    <span class=\"jh-ps-quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>If the top third doesn&rsquo;t mirror my job post, I&rsquo;m done. I see 400 of these a day.\n                <\/blockquote>\n                <div class=\"jh-ps-attr\">\n                    <div class=\"jh-ps-attr-name\">Sr. Recruiter, FAANG<\/div>\n                    <div class=\"jh-ps-attr-meta jh-mono\">Anonymized<\/div>\n                <\/div>\n                <div class=\"jh-ps-divider\"><\/div>\n                <div class=\"jh-ps-stats\">\n                    <div class=\"jh-ps-stat\">\n                        <div class=\"jh-ps-stat-num\"><span class=\"jh-ps-stat-big\">7<\/span><span class=\"jh-ps-stat-unit\">sec<\/span><\/div>\n                        <div class=\"jh-ps-stat-cap\">avg first-pass scan<\/div>\n                    <\/div>\n                    <div class=\"jh-ps-stat\">\n                        <div class=\"jh-ps-stat-num\"><span class=\"jh-ps-stat-big\">52<\/span><span class=\"jh-ps-stat-unit\">%<\/span><\/div>\n                        <div class=\"jh-ps-stat-cap\">of job-description keywords missing from the average resume<\/div>\n                    <\/div>\n                <\/div>\n            <\/article>\n\n            <article class=\"jh-ps-col jh-ps-col--outcome\">\n                <div class=\"jh-ps-col-eyebrow jh-mono\">The Outcome<\/div>\n                <blockquote class=\"jh-ps-quote\">\n                    <span class=\"jh-ps-quote-mark\" aria-hidden=\"true\">&ldquo;<\/span>Got two onsites in week one &mdash; both from roles I&rsquo;d been ghosted on with my old resume.\n                <\/blockquote>\n                <div class=\"jh-ps-attr\">\n                    <div class=\"jh-ps-attr-name\">Priya R., Senior Developer<\/div>\n                    <div class=\"jh-ps-attr-meta jh-mono\">Hubspot<\/div>\n                <\/div>\n                <div class=\"jh-ps-divider\"><\/div>\n                <div class=\"jh-ps-stats jh-ps-stats--three\">\n                    <div class=\"jh-ps-stat\">\n                        <div class=\"jh-ps-stat-num\"><span class=\"jh-ps-stat-big\">2.5<\/span><span class=\"jh-ps-stat-unit\">&times;<\/span><\/div>\n                        <div class=\"jh-ps-stat-cap\">recruiter response rate vs untailored baseline<\/div>\n                    <\/div>\n                    <div class=\"jh-ps-stat\">\n                        <div class=\"jh-ps-stat-num\"><span class=\"jh-ps-stat-big\">+27<\/span><span class=\"jh-ps-stat-unit\">pts<\/span><\/div>\n                        <div class=\"jh-ps-stat-cap\">median alignment lift after one Resume Transformer pass<\/div>\n                    <\/div>\n                    <div class=\"jh-ps-stat\">\n                        <div class=\"jh-ps-stat-num\"><span class=\"jh-ps-stat-big\">18<\/span><span class=\"jh-ps-stat-unit\">days<\/span><\/div>\n                        <div class=\"jh-ps-stat-cap\">median time-to-first-onsite for users running &ge;5 tailored apps\/week<\/div>\n                    <\/div>\n                <\/div>\n            <\/article>\n\n        <\/div>\n        <\/div><!-- \/.jh-ps-main -->\n\n        <div class=\"jh-ps-cta-row\">\n            <a class=\"btn-p\" href=\"https:\/\/app.justhired.ai\/\">\n                Optimize my resume\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n            <\/a>\n        <\/div>\n\n    <\/div>\n<\/section>\n\n<script>\n(function () {\n    'use strict';\n    \/* iOS autoplay fix (same approach as tailoring-steps.php): promote\n       data-poster -> poster, then play() once the demo scrolls into view.\n       preload=\"none\" keeps the clip from loading until it's needed. *\/\n    var v = document.querySelector('#jh_ps_8F6fQE video.jh-ps-demo-video');\n    if (!v) return;\n    var dp = v.getAttribute('data-poster');\n    if (dp && !v.getAttribute('poster')) v.setAttribute('poster', dp);\n    function tryPlay() { if (v.paused) v.play().catch(function () {}); }\n    if ('IntersectionObserver' in window) {\n        var io = new IntersectionObserver(function (entries) {\n            entries.forEach(function (e) { if (e.isIntersecting) tryPlay(); });\n        }, { threshold: 0.1 });\n        io.observe(v);\n    } else {\n        setTimeout(tryPlay, 500);\n    }\n})();\n<\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-0a5c7f3 elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"0a5c7f3\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-012ce54 exad-sticky-section-no\" data-id=\"012ce54\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-54b80ab elementor-widget__width-initial exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"54b80ab\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div id=\"jh_combined_t3TrZy\" class=\"jh-bento-wrapper\" role=\"region\" aria-label=\"Efficiency Matrix &amp; Diagnostic\" data-jh-component=\"Diagnostic\">\n    <!-- Background Elements -->\n    <div class=\"jh-bento-bg-glow\"><\/div>\n\n    <div class=\"jh-bento-inner\">\n        <div class=\"jh-bento-header\">\n            <span class=\"jh-mini-heading mono\">&#9654; SYSTEM_PROTOCOL: SIGNAL_INTEGRITY<\/span>\n            <h1 class=\"jh-main-title\">\n                Why generic AI gets you screened out.\n            <\/h1>\n            <p class=\"jh-subtitle\">\n                It fabricates experience you don\u2019t have \u2014 and ATS verification catches it. Just Hired amplifies only what\u2019s real.\n            <\/p>\n        <\/div>\n\n        <div class=\"jh-bento-grid\">\n\n            <!-- Top HUD Bar -->\n            <div class=\"jh-hud-bar bento-item\">\n                <div class=\"hud-left\">\n                    <span class=\"hud-status-dot\"><\/span>\n                    <span class=\"hud-text mono\">SYSTEM_STATUS: <span class=\"text-glow\">GROUNDING_ACTIVE<\/span><\/span>\n                <\/div>\n                <div class=\"hud-right\">\n                    <span class=\"hud-status-dot hud-status-dot-r\" style=\"display:none\"><\/span>\n                    <span class=\"hud-text mono\">CLAIM_INTEGRITY: <span class=\"jh-hud-signal-val text-glow\">100%<\/span><\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Left Column: The Matrix -->\n            <div class=\"jh-matrix-card bento-item\">\n                <div class=\"card-header\">\n                    <h3 class=\"mono uppercase tracking-widest\">Efficiency Matrix v4.2<\/h3>\n                <\/div>\n                <div class=\"matrix-scroll-wrapper\">\n                    <table class=\"jh-matrix-table\">\n                        <thead>\n                            <tr>\n                                <th scope=\"col\" class=\"metric-label mono\">METRIC<\/th>\n                                <th scope=\"col\" class=\"mono jh-th-manual\">MANUAL<\/th>\n                                <th scope=\"col\" class=\"mono jh-th-genai\">GENERIC_AI<\/th>\n                                <th scope=\"col\" class=\"agent-col-glow mono\">JUST_HIRED<\/th>\n                            <\/tr>\n                        <\/thead>\n                        <tbody>\n                            <tr>\n                                <th scope=\"row\" class=\"metric-label mono\">INTERVIEW_RATE<\/th>\n                                <td data-label=\"MANUAL\">3%<\/td>\n                                <td data-label=\"GENERIC_AI\">7%<\/td>\n                                <td class=\"agent-cell\" data-label=\"\u2713 JUST HIRED\">\n                                    <div class=\"jh-agent-value-box\" data-glitch=\"16%\">16%<\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <th scope=\"row\" class=\"metric-label mono\">APP_TIME<\/th>\n                                <td data-label=\"MANUAL\">30 minutes<\/td>\n                                <td data-label=\"GENERIC_AI\">15 min<\/td>\n                                <td class=\"agent-cell\" data-label=\"\u2713 JUST HIRED\">\n                                    <div class=\"jh-agent-value-box\" data-glitch=\"2 min\">2 min<\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <th scope=\"row\" class=\"metric-label mono\">ATS_SCORING<\/th>\n                                <td data-label=\"MANUAL\">LOW<\/td>\n                                <td data-label=\"GENERIC_AI\">SURFACE_SCAN<\/td>\n                                <td class=\"agent-cell\" data-label=\"\u2713 JUST HIRED\">\n                                    <div class=\"jh-agent-value-box\" data-glitch=\"90%+\">90%+<\/div>\n                                <\/td>\n                            <\/tr>\n                            <tr>\n                                <th scope=\"row\" class=\"metric-label mono\">RESUME_CLAIMS<\/th>\n                                <td data-label=\"MANUAL\">AS-WRITTEN<\/td>\n                                <td data-label=\"GENERIC_AI\">FABRICATED<\/td>\n                                <td class=\"agent-cell\" data-label=\"\u2713 JUST HIRED\">\n                                    <div class=\"jh-agent-value-box\" data-glitch=\"GROUNDED\">GROUNDED<\/div>\n                                <\/td>\n                            <\/tr>\n                        <\/tbody>\n                    <\/table>\n                <\/div>\n                <div class=\"card-footer mono\">\n                    <div class=\"footer-scanner\"><\/div>\n                    SIGNAL_SCAN: VERIFYING_CLAIMS...\n                <\/div>\n            <\/div>\n\n            <!-- Right Column: Anti-Hallucination Proof -->\n            <div class=\"jh-diagnostic-card bento-item\">\n                <div class=\"card-header\">\n                    <h3 class=\"mono uppercase tracking-widest\">Anti-Hallucination Engine<\/h3>\n                    <p class=\"diag-subtitle-cta\">WHY NOT JUST USE GPT?<\/p>\n                <\/div>\n\n                <div class=\"jh-hx-proof\">\n                    <!-- Generic AI: fabricated claim -->\n                    <div class=\"jh-hx-row jh-hx-bad\">\n                        <div class=\"jh-hx-tag mono\">GENERIC AI <span class=\"jh-hx-mark\" aria-hidden=\"true\">\u2717<\/span><\/div>\n                        <p class=\"jh-hx-claim\">\u201cLed a team of 12 engineers to $4M in ARR.\u201d<\/p>\n                        <p class=\"jh-hx-note\">Invented \u2014 you never managed a team. ATS verification and recruiters catch the gap, and you get the same silence.<\/p>\n                    <\/div>\n\n                    <div class=\"jh-hx-divider mono\" aria-hidden=\"true\">VS<\/div>\n\n                    <!-- Just Hired: grounded claim -->\n                    <div class=\"jh-hx-row jh-hx-good\">\n                        <div class=\"jh-hx-tag mono\">JUST HIRED <span class=\"jh-hx-mark\" aria-hidden=\"true\">\u2713<\/span><\/div>\n                        <p class=\"jh-hx-claim\">\u201cCoordinated 3 cross-functional launches that cut release time 40%.\u201d<\/p>\n                        <p class=\"jh-hx-note\">Pulled straight from your real resume \u2014 just rewritten in the language the role actually scores for. Nothing invented.<\/p>\n                    <\/div>\n                <\/div>\n\n                <a href=\"https:\/\/app.justhired.ai\/dashboard_v2_0\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"jh-cta-2026 jh-hx-cta\" aria-label=\"Start Just Hired for free\">\n                    See what Just Hired changes \u2192\n                <\/a>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* ========================================================================\n   OPTIMIZED CSS - 2026 Edition\n   - 20% size reduction through deduplication\n   - Custom properties system for maintainability\n   - WCAG AA accessibility compliance\n   - Reduced motion support\n   ======================================================================== *\/\n\n\/* Font imports moved to centralized style.css and functions.php for optimization *\/\n\n\/* ========================================================================\n   1. SCOPING & RESET\n   ======================================================================== *\/\n#jh_combined_t3TrZy, \n#jh_combined_t3TrZy * { \n    box-sizing: border-box; \n}\n\n\/* ========================================================================\n   2. CUSTOM PROPERTIES SYSTEM\n   ======================================================================== *\/\n#jh_combined_t3TrZy {\n    \/* Color Palette *\/\n    --jh-bg: #030303;\n    --jh-accent: #0554F2;\n    --jh-accent-glow: rgba(5, 84, 242, 0.5);\n    --jh-glass: rgba(10, 10, 10, 0.4);\n    --jh-border: rgba(255, 255, 255, 0.08);\n    --jh-text: #ffffff;\n    --jh-text-dim: rgba(255, 255, 255, 0.4);\n    --jh-agent: #60B0FF;\n    \n    \/* Spacing Scale (8px base) *\/\n    --jh-space-xs: 8px;\n    --jh-space-sm: 15px;\n    --jh-space-md: 20px;\n    --jh-space-lg: 30px;\n    --jh-space-xl: 40px;\n    --jh-space-2xl: 60px;\n    --jh-space-3xl: 80px;\n    \n    \/* Animation Timings *\/\n    --jh-transition-fast: 0.2s;\n    --jh-transition-base: 0.3s;\n    --jh-transition-slow: 0.4s;\n    --jh-easing: cubic-bezier(0.23, 1, 0.32, 1);\n    \n    \/* Typography *\/\n    --jh-font-mono: 'Geist Mono', 'JetBrains Mono', 'Courier New', monospace;\n    --jh-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    \n    \/* Breakpoints (for JS if needed) *\/\n    --jh-bp-mobile: 768px;\n    --jh-bp-tablet: 1024px;\n    --jh-bp-desktop: 1025px;\n}\n\n\/* ========================================================================\n   3. WRAPPER & LAYOUT FOUNDATION\n   ======================================================================== *\/\n#jh_combined_t3TrZy.jh-bento-wrapper {\n    background: var(--jh-bg);\n    padding: clamp(var(--jh-space-2xl), 8vh, var(--jh-space-3xl)) var(--jh-space-md);\n    font-family: var(--jh-font-sans);\n    color: var(--jh-text);\n    position: relative;\n    min-height: 100vh;\n    min-height: 100svh;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    content-visibility: auto;\n    contain-intrinsic-size: 1px 1000px;\n}\n\n\/* Full-bleed on mobile: escape parent Elementor section padding so the bento\n   background reaches viewport edges per brand mobile rule. Internal\n   padding (clamp(...) var(--jh-space-md)) keeps content comfortably inset. *\/\n@media (max-width: 720px) {\n    #jh_combined_t3TrZy.jh-bento-wrapper {\n        margin-left: calc(50% - 50vw);\n        margin-right: calc(50% - 50vw);\n        width: 100vw;\n        max-width: 100vw;\n    }\n}\n\n#jh_combined_t3TrZy .jh-bento-inner {\n    max-width: 1200px;\n    margin: 0 auto;\n    width: 100%;\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: column;\n}\n\n\/* Background Glow Effect *\/\n#jh_combined_t3TrZy .jh-bento-bg-glow {\n    position: absolute;\n    inset: 0;\n    background:\n        radial-gradient(at 0% 0%, rgba(5, 84, 242, 0.15) 0px, transparent 50%),\n        radial-gradient(at 100% 0%, rgba(96, 176, 255, 0.08) 0px, transparent 50%),\n        radial-gradient(at 50% 100%, rgba(5, 84, 242, 0.1) 0px, transparent 50%);\n    filter: blur(100px);\n    opacity: 0.5;\n    pointer-events: none;\n    z-index: 0;\n}\n\n\/* ========================================================================\n   4. HEADER SECTION\n   ======================================================================== *\/\n#jh_combined_t3TrZy .jh-bento-header {\n    text-align: center;\n    margin: 0 auto var(--jh-space-2xl);\n    max-width: 1100px;\n    z-index: 2;\n    padding: 0 var(--jh-space-md);\n}\n\n#jh_combined_t3TrZy .jh-mini-heading {\n    color: var(--jh-agent);\n    display: block;\n    font-weight: 600;\n    margin-bottom: var(--jh-space-xs);\n    text-shadow: 0 0 10px rgba(96, 176, 255, 0.3);\n}\n\n#jh_combined_t3TrZy .jh-main-title {\n    font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    font-size: clamp(32px, 5vw, 42px);\n    line-height: 1.1;\n    font-weight: 800;\n    letter-spacing: -1px;\n    margin: var(--jh-space-sm) 0;\n    color: var(--jh-text);\n}\n\n#jh_combined_t3TrZy .jh-subtitle {\n    font-family: var(--jh-font-mono);\n    font-size: 11px;\n    letter-spacing: 0.2em;\n    color: rgba(255, 255, 255, 0.5);\n    max-width: 650px;\n    margin: 0 auto;\n    line-height: 1.8;\n    text-transform: uppercase;\n}\n\n#jh_combined_t3TrZy .gradient-text {\n    background: linear-gradient(135deg, var(--jh-accent), var(--jh-agent));\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\n\/* ========================================================================\n   5. UTILITY CLASSES (CONSOLIDATED)\n   ======================================================================== *\/\n#jh_combined_t3TrZy .mono {\n    font-family: var(--jh-font-mono);\n    letter-spacing: 2px;\n    font-size: clamp(8px, 0.9vw, 10px);\n    text-transform: uppercase;\n}\n\n#jh_combined_t3TrZy .text-glow { \n    color: var(--jh-accent); \n    text-shadow: 0 0 10px var(--jh-accent-glow); \n}\n\n#jh_combined_t3TrZy .text-xs { font-size: 12px; }\n#jh_combined_t3TrZy .text-dim { color: var(--jh-text-dim); }\n#jh_combined_t3TrZy .uppercase { text-transform: uppercase; }\n#jh_combined_t3TrZy .tracking-widest { letter-spacing: 0.2em; }\n#jh_combined_t3TrZy .mb-4 { margin-bottom: 16px; }\n#jh_combined_t3TrZy .mt-4 { margin-top: 16px; }\n#jh_combined_t3TrZy .block { display: block; }\n\n\/* ========================================================================\n   6. BENTO GRID SYSTEM\n   ======================================================================== *\/\n#jh_combined_t3TrZy .jh-bento-grid {\n    display: grid;\n    grid-template-columns: 1fr;\n    gap: 24px;\n    width: 100%;\n    z-index: 1;\n}\n\n#jh_combined_t3TrZy .bento-item {\n    background: var(--jh-glass);\n    backdrop-filter: blur(25px);\n    border: 1px solid var(--jh-border);\n    border-radius: 24px;\n    padding: clamp(var(--jh-space-md), 4vw, 35px);\n    position: relative;\n    overflow: hidden;\n    transition: all var(--jh-transition-slow) var(--jh-easing);\n}\n\n\/* ========================================================================\n   7. HUD BAR COMPONENT\n   ======================================================================== *\/\n#jh_combined_t3TrZy .jh-hud-bar {\n    padding: var(--jh-space-sm) var(--jh-space-lg);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: rgba(255, 255, 255, 0.01);\n    border-radius: 100px;\n}\n\n#jh_combined_t3TrZy .hud-left,\n#jh_combined_t3TrZy .hud-right {\n    display: flex;\n    align-items: center;\n}\n\n#jh_combined_t3TrZy .hud-status-dot {\n    width: var(--jh-space-xs);\n    height: var(--jh-space-xs);\n    background: #00ff88;\n    border-radius: 50%;\n    display: inline-block;\n    margin-right: 10px;\n    box-shadow: 0 0 10px #00ff88;\n    animation: jh_pulse 2s infinite;\n}\n\n#jh_combined_t3TrZy .hud-text {\n    font-size: clamp(12px, 1vw, 14px);\n}\n\n\/* ========================================================================\n   8. MATRIX TABLE COMPONENT\n   ======================================================================== *\/\n#jh_combined_t3TrZy .jh-matrix-card {\n    display: flex;\n    flex-direction: column;\n}\n\n#jh_combined_t3TrZy .card-header h3 {\n    margin: 0;\n    font-size: 14px;\n}\n\n#jh_combined_t3TrZy .jh-matrix-table {\n    width: 100%;\n    border-collapse: collapse;\n    margin-top: var(--jh-space-lg);\n}\n\n#jh_combined_t3TrZy .jh-matrix-table th {\n    padding: var(--jh-space-sm) 10px;\n    text-align: center;\n    color: var(--jh-text-dim);\n    border-bottom: 1px solid var(--jh-border);\n    font-weight: 600;\n}\n\n#jh_combined_t3TrZy .jh-matrix-table td {\n    padding: var(--jh-space-md) 10px;\n    font-size: 15px;\n    border-bottom: 1px solid rgba(255, 255, 255, 0.02);\n    font-weight: 500;\n    text-align: center;\n}\n\n#jh_combined_t3TrZy .metric-label {\n    color: var(--jh-text-dim);\n    font-size: 10px;\n    letter-spacing: 0.15em;\n    text-align: left;\n}\n\n\/* Agent Column Styling *\/\n#jh_combined_t3TrZy .agent-col-glow {\n    color: var(--jh-text);\n    font-weight: 900;\n    background: rgba(5, 84, 242, 0.15);\n    box-shadow: inset 0 0 20px rgba(5, 84, 242, 0.2);\n    text-shadow: \n        0 0 2px var(--jh-text), \n        0 0 8px var(--jh-accent), \n        0 0 15px var(--jh-accent-glow);\n}\n\n#jh_combined_t3TrZy .agent-cell {\n    background: rgba(5, 84, 242, 0.1);\n    color: var(--jh-text);\n    font-weight: 700;\n    box-shadow: inset 0 0 15px rgba(5, 84, 242, 0.15);\n    text-shadow: \n        0 0 2px var(--jh-text), \n        0 0 5px var(--jh-accent), \n        0 0 10px var(--jh-accent-glow);\n    overflow: hidden;\n    transition: all var(--jh-transition-base) ease;\n}\n\n\/* Scanner Animation Overlay (Consolidated) *\/\n#jh_combined_t3TrZy .agent-cell::before,\n#jh_combined_t3TrZy .agent-col-glow::before {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(96, 176, 255, 0) 49%,\n        rgba(5, 84, 242, 0.6) 50%,\n        rgba(96, 176, 255, 0) 51%,\n        transparent 60%\n    );\n    z-index: 5;\n    pointer-events: none;\n    animation: jh_linear_scan 4s infinite linear;\n}\n\n#jh_combined_t3TrZy .agent-cell::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    border-left: 1px solid rgba(96, 176, 255, 0.3);\n    border-right: 1px solid rgba(96, 176, 255, 0.3);\n    pointer-events: none;\n    z-index: 2;\n}\n\n\/* Card Footer *\/\n#jh_combined_t3TrZy .card-footer {\n    margin-top: auto;\n    padding-top: var(--jh-space-md);\n    color: var(--jh-text-dim);\n    text-align: center;\n    position: relative;\n}\n\n#jh_combined_t3TrZy .footer-scanner {\n    height: 1px;\n    background: var(--jh-accent);\n    width: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n    opacity: 0.3;\n    animation: jh_linear_scan 3s infinite linear;\n}\n\n\/* ========================================================================\n   9. DIAGNOSTIC CARD COMPONENT\n   ======================================================================== *\/\n#jh_combined_t3TrZy .jh-diagnostic-card {\n    display: flex;\n    flex-direction: column;\n}\n\n#jh_combined_t3TrZy .diagnostic-steps { \n    margin-top: var(--jh-space-xl); \n    flex-grow: 1; \n}\n\n#jh_combined_t3TrZy .jh-step { \n    display: none; \n    flex-direction: column; \n    height: 100%; \n    min-height: 250px; \n}\n\n#jh_combined_t3TrZy .jh-step.active { \n    display: flex; \n}\n\n\/* Input Container *\/\n#jh_combined_t3TrZy .jh-input-container {\n    width: 100%;\n}\n\n#jh_combined_t3TrZy .jh-val-display {\n    font-size: 42px;\n    font-weight: 900;\n    text-align: center;\n    margin-top: var(--jh-space-md);\n    color: var(--jh-accent);\n    text-shadow: 0 0 20px var(--jh-accent-glow);\n    transition: all var(--jh-transition-fast) ease;\n}\n\n\/* Range Slider (Consolidated) *\/\n#jh_combined_t3TrZy .jh-range-2026 {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 100%;\n    height: 4px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 10px;\n    outline: none;\n    cursor: pointer;\n}\n\n#jh_combined_t3TrZy .jh-range-2026::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 24px;\n    height: 24px;\n    background: var(--jh-bg);\n    border: 2px solid var(--jh-accent);\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 0 15px var(--jh-accent-glow);\n    transition: transform var(--jh-transition-fast), background var(--jh-transition-fast);\n}\n\n#jh_combined_t3TrZy .jh-range-2026::-moz-range-thumb {\n    width: 24px;\n    height: 24px;\n    background: var(--jh-bg);\n    border: 2px solid var(--jh-accent);\n    border-radius: 50%;\n    cursor: pointer;\n    box-shadow: 0 0 15px var(--jh-accent-glow);\n    transition: transform var(--jh-transition-fast), background var(--jh-transition-fast);\n}\n\n#jh_combined_t3TrZy .jh-range-2026::-webkit-slider-thumb:hover {\n    transform: scale(1.1);\n    background: var(--jh-accent);\n}\n\n#jh_combined_t3TrZy .jh-range-2026::-moz-range-thumb:hover {\n    transform: scale(1.1);\n    background: var(--jh-accent);\n}\n\n\/* ========================================================================\n   10. BUTTONS & INTERACTIVE ELEMENTS\n   ======================================================================== *\/\n#jh_combined_t3TrZy .jh-btn-2026 {\n    background: linear-gradient(135deg, var(--jh-accent), #0339a6);\n    color: var(--jh-text);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    padding: 18px;\n    border-radius: 12px;\n    font-family: var(--jh-font-mono);\n    font-size: 14px;\n    font-weight: 700;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    transition: all var(--jh-transition-base) ease;\n    margin-top: var(--jh-space-lg);\n}\n\n#jh_combined_t3TrZy .jh-btn-2026:hover {\n    background: var(--jh-accent);\n    box-shadow: 0 0 30px var(--jh-accent-glow);\n    transform: translateY(-2px);\n}\n\n#jh_combined_t3TrZy .jh-btn-2026:focus-visible {\n    outline: 2px solid var(--jh-accent);\n    outline-offset: 4px;\n}\n\n#jh_combined_t3TrZy .jh-btn-2026:active {\n    filter: brightness(1.2);\n    transform: scale(0.98);\n}\n\n\/* Target Options *\/\n#jh_combined_t3TrZy .jh-target-list {\n    margin-top: 32px;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n#jh_combined_t3TrZy .target-opt-2026 {\n    background: rgba(255, 255, 255, 0.02);\n    border: 1px solid var(--jh-border);\n    color: var(--jh-text);\n    padding: var(--jh-space-md) 24px;\n    border-radius: 12px;\n    font-family: var(--jh-font-mono);\n    font-size: 11px;\n    text-align: left;\n    cursor: pointer;\n    transition: all var(--jh-transition-base) var(--jh-easing);\n    margin-bottom: 0;\n    width: 100%;\n}\n\n#jh_combined_t3TrZy .target-opt-2026:hover {\n    border-color: var(--jh-accent);\n    background: rgba(5, 84, 242, 0.1);\n    padding-left: var(--jh-space-lg);\n}\n\n#jh_combined_t3TrZy .target-opt-2026:focus-visible {\n    outline: 2px solid var(--jh-accent);\n    outline-offset: 4px;\n}\n\n#jh_combined_t3TrZy .target-opt-2026:active {\n    filter: brightness(1.2);\n    transform: scale(0.98);\n}\n\n\/* ========================================================================\n   11. LOADING & RESULT STATES\n   ======================================================================== *\/\n#jh_combined_t3TrZy .loading-ui, \n#jh_combined_t3TrZy .result-ui {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n}\n\n#jh_combined_t3TrZy .loading-ring {\n    width: 40px;\n    height: 40px;\n    border: 2px solid rgba(255, 255, 255, 0.1);\n    border-top-color: var(--jh-accent);\n    border-radius: 50%;\n    animation: jh_spin 1s infinite linear;\n}\n\n#jh_combined_t3TrZy .jh-result-text { \n    font-size: 24px; \n    margin: var(--jh-space-md) 0; \n}\n\n#jh_combined_t3TrZy .jh-cta-2026 {\n    background: var(--jh-text);\n    color: var(--jh-bg);\n    text-decoration: none;\n    padding: 18px var(--jh-space-lg);\n    border-radius: 100px;\n    font-family: var(--jh-font-mono);\n    font-size: 14px;\n    font-weight: 700;\n    transition: all var(--jh-transition-base) ease;\n    display: inline-block;\n}\n\n#jh_combined_t3TrZy .jh-cta-2026:hover {\n    transform: scale(1.05);\n    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);\n}\n\n#jh_combined_t3TrZy .jh-cta-2026:focus-visible {\n    outline: 2px solid var(--jh-text);\n    outline-offset: 4px;\n}\n\n#jh_combined_t3TrZy .jh-cta-2026:active {\n    filter: brightness(1.2);\n    transform: scale(0.98);\n}\n\n\/* ========================================================================\n   12. ANIMATIONS (CONSOLIDATED)\n   ======================================================================== *\/\n@keyframes jh_pulse {\n    0%, 100% {\n        opacity: 1;\n        transform: scale(1);\n    }\n    50% {\n        opacity: 0.5;\n        transform: scale(0.8);\n    }\n}\n\n@keyframes jh_linear_scan {\n    0% {\n        transform: translateY(-100%);\n        opacity: 1;\n    }\n    100% {\n        transform: translateY(100%);\n        opacity: 0;\n    }\n}\n\n@keyframes jh_spin {\n    to {\n        transform: rotate(360deg);\n    }\n}\n\n\/* ========================================================================\n   13. DESKTOP LAYOUT (1025px+)\n   ======================================================================== *\/\n@media (min-width: 1025px) {\n    #jh_combined_t3TrZy .jh-bento-inner {\n        min-width: 1000px;\n    }\n\n    #jh_combined_t3TrZy .jh-bento-grid {\n        grid-template-columns: 65% 35%;\n        grid-template-rows: auto 1fr;\n    }\n\n    #jh_combined_t3TrZy .jh-hud-bar {\n        grid-column: span 2;\n    }\n\n    #jh_combined_t3TrZy .jh-matrix-card {\n        min-height: 600px;\n    }\n\n    #jh_combined_t3TrZy .jh-diagnostic-card {\n        align-self: flex-start;\n    }\n\n    \/* Desktop-only hover effects *\/\n    #jh_combined_t3TrZy .jh-matrix-table tr:hover {\n        transform: translateZ(20px) scale(1.01);\n        background: rgba(255, 255, 255, 0.03);\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);\n    }\n\n    #jh_combined_t3TrZy .jh-matrix-table tr:hover .agent-cell {\n        color: var(--jh-agent);\n        text-shadow: 0 0 12px rgba(96, 176, 255, 0.8);\n    }\n}\n\n\/* ========================================================================\n   14. TABLET & MOBILE LAYOUT (\u22641024px)\n   ======================================================================== *\/\n\n\/* ========================================================================\n   MOBILE FIXES (\u22641024px) - TABLET & LARGE PHONES\n   ======================================================================== *\/\n@media (max-width: 1024px) {\n    \/* FIXED: Header spacing *\/\n    #jh_combined_t3TrZy .jh-bento-header {\n        margin-bottom: var(--jh-space-lg) !important;\n        padding: 0 var(--jh-space-sm) !important;\n    }\n\n    \/* FIXED: Main title - smaller on mobile *\/\n    #jh_combined_t3TrZy .jh-main-title {\n        font-size: clamp(24px, 6vw, 32px) !important;\n        line-height: 1.2 !important;\n        margin-bottom: var(--jh-space-md) !important;\n    }\n\n    \/* FIXED: Subtitle - more readable *\/\n    #jh_combined_t3TrZy .jh-subtitle {\n        font-size: clamp(12px, 3vw, 14px) !important;\n        line-height: 1.5 !important;\n    }\n\n    \/* FIXED: Bento grid - single column on mobile *\/\n    #jh_combined_t3TrZy .jh-bento-grid {\n        grid-template-columns: 1fr !important;\n        gap: var(--jh-space-lg) !important;\n    }\n\n    \/* The Agent Assessment HUD Styling *\/\n    #jh_combined_t3TrZy .jh-diagnostic-card {\n        background: rgba(5, 84, 242, 0.05);\n        border-color: var(--jh-border);\n        box-shadow:\n            inset 0 0 20px rgba(5, 84, 242, 0.3),\n            0 20px 50px rgba(0, 0, 0, 0.9);\n        backdrop-filter: blur(40px);\n    }\n\n    #jh_combined_t3TrZy .jh-diagnostic-card h3 {\n        text-shadow: 0 0 10px rgba(5, 84, 242, 0.8);\n        font-size: clamp(14px, 3.5vw, 16px) !important;\n    }\n\n    \/* HUD Corner Accents *\/\n    #jh_combined_t3TrZy .jh-diagnostic-card::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        z-index: 10;\n        background:\n            linear-gradient(to right, var(--jh-accent) 2px, transparent 2px) 0 0 \/ 20px 2px no-repeat,\n            linear-gradient(to bottom, var(--jh-accent) 2px, transparent 2px) 0 0 \/ 2px 20px no-repeat,\n            linear-gradient(to left, var(--jh-accent) 2px, transparent 2px) 100% 0 \/ 20px 2px no-repeat,\n            linear-gradient(to bottom, var(--jh-accent) 2px, transparent 2px) 100% 0 \/ 2px 20px no-repeat,\n            linear-gradient(to right, var(--jh-accent) 2px, transparent 2px) 0 100% \/ 20px 2px no-repeat,\n            linear-gradient(to top, var(--jh-accent) 2px, transparent 2px) 0 100% \/ 2px 20px no-repeat,\n            linear-gradient(to left, var(--jh-accent) 2px, transparent 2px) 100% 100% \/ 20px 2px no-repeat,\n            linear-gradient(to top, var(--jh-accent) 2px, transparent 2px) 100% 100% \/ 2px 20px no-repeat;\n    }\n\n    \/* FIXED: Value display - smaller but still prominent *\/\n    #jh_combined_t3TrZy .jh-val-display {\n        font-size: clamp(48px, 12vw, 72px) !important;\n        color: var(--jh-text);\n        text-shadow: \n            0 0 30px var(--jh-accent-glow), \n            0 0 10px rgba(255, 255, 255, 0.5);\n        margin: var(--jh-space-md) 0 !important;\n    }\n\n    \/* FIXED: Form labels *\/\n    #jh_combined_t3TrZy .jh-step label {\n        color: rgba(255, 255, 255, 0.9);\n        font-size: 10px !important;\n        letter-spacing: 2px;\n        opacity: 1;\n    }\n\n    #jh_combined_t3TrZy .jh-diagnostic-card .text-dim {\n        color: rgba(255, 255, 255, 0.6);\n    }\n\n    #jh_combined_t3TrZy .jh-strength-level {\n        text-shadow: \n            0 0 15px currentColor, \n            0 0 30px currentColor;\n        font-weight: 900;\n        font-size: clamp(18px, 4vw, 24px) !important;\n    }\n\n    \/* FIXED: HUD bar - stack on mobile *\/\n    #jh_combined_t3TrZy .jh-hud-bar {\n        flex-direction: column !important;\n        gap: var(--jh-space-sm) !important;\n        padding: var(--jh-space-md) !important;\n        text-align: center !important;\n    }\n\n    #jh_combined_t3TrZy .hud-left,\n    #jh_combined_t3TrZy .hud-right {\n        justify-content: center !important;\n    }\n\n    \/* FIXED: HUD text sizing *\/\n    #jh_combined_t3TrZy .hud-text {\n        font-size: 9px !important;\n    }\n\n    \/* FIXED: Matrix card scrolling *\/\n    #jh_combined_t3TrZy .matrix-scroll-wrapper {\n        overflow-x: auto !important;\n        -webkit-overflow-scrolling: touch !important;\n    }\n\n    \/* FIXED: Range inputs - larger touch targets *\/\n    #jh_combined_t3TrZy .jh-range-2026 {\n        height: 8px !important;\n    }\n\n    \/* FIXED: Buttons - full width, larger touch targets *\/\n    #jh_combined_t3TrZy .jh-btn-2026 {\n        width: 100% !important;\n        padding: 16px 24px !important;\n        font-size: 11px !important;\n        min-height: 48px !important;\n    }\n}\n\n\/* ========================================================================\n   MOBILE TABLE TRANSFORMATION (\u2264768px) - PHONES\n   ======================================================================== *\/\n@media (max-width: 768px) {\n    \/* FIXED: Even smaller title on phones *\/\n    #jh_combined_t3TrZy .jh-main-title {\n        font-size: clamp(20px, 5.5vw, 26px) !important;\n    }\n\n    \/* FIXED: Mini heading *\/\n    #jh_combined_t3TrZy .jh-mini-heading {\n        font-size: 8px !important;\n    }\n\n    \/* FIXED: Transform table to card layout *\/\n    #jh_combined_t3TrZy .jh-matrix-table,\n    #jh_combined_t3TrZy .jh-matrix-table thead,\n    #jh_combined_t3TrZy .jh-matrix-table tbody,\n    #jh_combined_t3TrZy .jh-matrix-table th,\n    #jh_combined_t3TrZy .jh-matrix-table td,\n    #jh_combined_t3TrZy .jh-matrix-table tr {\n        display: block !important;\n    }\n\n    #jh_combined_t3TrZy .jh-matrix-table thead {\n        display: none !important;\n    }\n\n    #jh_combined_t3TrZy .jh-matrix-table tr {\n        display: grid !important;\n        grid-template-columns: 1fr 1fr !important;\n        gap: 10px !important;\n        background: rgba(255, 255, 255, 0.02) !important;\n        border: 1px solid var(--jh-border) !important;\n        border-radius: 16px !important;\n        padding: var(--jh-space-md) !important;\n        margin-bottom: var(--jh-space-md) !important;\n    }\n\n    #jh_combined_t3TrZy .jh-matrix-table .metric-label {\n        grid-column: span 2 !important;\n        font-size: 11px !important;\n        color: var(--jh-accent) !important;\n        margin-bottom: 8px !important;\n        text-align: center !important;\n        border-bottom: 1px solid var(--jh-border) !important;\n        padding-bottom: 8px !important;\n    }\n\n    #jh_combined_t3TrZy .jh-matrix-table td {\n        position: relative !important;\n        padding: 12px !important;\n        text-align: center !important;\n        background: rgba(255, 255, 255, 0.02) !important;\n        border-radius: 8px !important;\n        font-size: 11px !important;\n    }\n\n    #jh_combined_t3TrZy .jh-matrix-table td::before {\n        content: attr(data-label) !important;\n        display: block !important;\n        font-size: 8px !important;\n        color: rgba(255, 255, 255, 0.5) !important;\n        margin-bottom: 4px !important;\n        letter-spacing: 1px !important;\n        text-transform: uppercase !important;\n    }\n\n    \/* FIXED: Agent cell - prominent on mobile *\/\n    #jh_combined_t3TrZy .jh-matrix-table .agent-cell {\n        grid-column: span 2 !important;\n        background: rgba(5, 84, 242, 0.1) !important;\n        border: 1px solid var(--jh-accent) !important;\n        padding: 16px !important;\n    }\n\n    #jh_combined_t3TrZy .jh-agent-value-box {\n        font-size: clamp(16px, 4vw, 20px) !important;\n        padding: 12px !important;\n    }\n\n    \/* FIXED: Diagnostic steps *\/\n    #jh_combined_t3TrZy .jh-step {\n        padding: var(--jh-space-lg) !important;\n    }\n\n    \/* FIXED: Input container *\/\n    #jh_combined_t3TrZy .jh-input-container {\n        flex-direction: column !important;\n        gap: var(--jh-space-md) !important;\n    }\n\n    \/* FIXED: Target list - single column *\/\n    #jh_combined_t3TrZy .jh-target-list {\n        grid-template-columns: 1fr !important;\n        gap: var(--jh-space-sm) !important;\n    }\n\n    \/* FIXED: Target option - full width *\/\n    #jh_combined_t3TrZy .jh-target-option {\n        padding: var(--jh-space-md) !important;\n        font-size: 12px !important;\n    }\n\n    \/* FIXED: Results card *\/\n    #jh_combined_t3TrZy .jh-result-card {\n        padding: var(--jh-space-lg) !important;\n    }\n\n    \/* FIXED: Strength meter *\/\n    #jh_combined_t3TrZy .jh-strength-bar {\n        height: 12px !important;\n    }\n\n    \/* FIXED: Card headers *\/\n    #jh_combined_t3TrZy .card-header h3 {\n        font-size: clamp(12px, 3.5vw, 14px) !important;\n    }\n\n    \/* FIXED: Bento items - more padding on small screens *\/\n    #jh_combined_t3TrZy .bento-item {\n        padding: var(--jh-space-md) !important;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    #jh_combined_t3TrZy * {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n\n@media (prefers-contrast: high) {\n    #jh_combined_t3TrZy {\n        --jh-border: rgba(255, 255, 255, 0.3);\n        --jh-accent: #0080ff;\n    }\n}\n}\n<\/style>\n\n<script>\n(function() {\n    var injectId = 'jh-csignal-injected-jh_combined_t3TrZy';\n    if (document.getElementById(injectId)) return;\n    var s = document.createElement('style');\n    s.id = injectId;\n    s.textContent =\n        '#jh_combined_t3TrZy .jh-diagnostic-card {' +\n            'background: rgba(5, 84, 242, 0.05) !important;' +\n            'box-shadow: inset 0 0 20px rgba(5, 84, 242, 0.3), 0 20px 50px rgba(0, 0, 0, 0.5) !important;' +\n            'backdrop-filter: blur(40px) !important;' +\n        '}' +\n        '#jh_combined_t3TrZy .jh-diagnostic-card::before {' +\n            'content: \"\" !important;' +\n            'position: absolute !important;' +\n            'inset: 0 !important;' +\n            'pointer-events: none !important;' +\n            'z-index: 10 !important;' +\n            'background: ' +\n                'linear-gradient(to right, #0554F2 2px, transparent 2px) 0 0 \/ 20px 2px no-repeat,' +\n                'linear-gradient(to bottom, #0554F2 2px, transparent 2px) 0 0 \/ 2px 20px no-repeat,' +\n                'linear-gradient(to left, #0554F2 2px, transparent 2px) 100% 0 \/ 20px 2px no-repeat,' +\n                'linear-gradient(to bottom, #0554F2 2px, transparent 2px) 100% 0 \/ 2px 20px no-repeat,' +\n                'linear-gradient(to right, #0554F2 2px, transparent 2px) 0 100% \/ 20px 2px no-repeat,' +\n                'linear-gradient(to top, #0554F2 2px, transparent 2px) 0 100% \/ 2px 20px no-repeat,' +\n                'linear-gradient(to left, #0554F2 2px, transparent 2px) 100% 100% \/ 20px 2px no-repeat,' +\n                'linear-gradient(to top, #0554F2 2px, transparent 2px) 100% 100% \/ 2px 20px no-repeat !important;' +\n        '}' +\n        '@media (max-width: 720px) {' +\n            '#jh_combined_t3TrZy .hud-left { display: none !important; }' +\n            '#jh_combined_t3TrZy .hud-status-dot-r { display: inline-block !important; margin-right: 10px !important; }' +\n        '}' +\n        '@media (max-width: 768px) {' +\n            \/* MANUAL \u2014 worst: red FRAME (border + tint) carries the semantic;\n               text stays near-white for legibility (colored text on same-hue\n               tint was muddy). Value bright, label dimmed, no colored glow. *\/\n            '#jh_combined_t3TrZy .jh-matrix-table td[data-label=\"MANUAL\"] {' +\n                'background: rgba(255, 80, 80, 0.08) !important;' +\n                'border: 1px solid rgba(255, 80, 80, 0.5) !important;' +\n                'box-shadow: inset 0 0 12px rgba(255, 80, 80, 0.12) !important;' +\n                'color: rgba(255, 255, 255, 0.95) !important;' +\n                'text-shadow: none !important;' +\n            '}' +\n            '#jh_combined_t3TrZy .jh-matrix-table td[data-label=\"MANUAL\"]::before {' +\n                'color: rgba(255, 255, 255, 0.6) !important;' +\n            '}' +\n            \/* GENERIC_AI \u2014 better: amber FRAME, same near-white text treatment *\/\n            '#jh_combined_t3TrZy .jh-matrix-table td[data-label=\"GENERIC_AI\"] {' +\n                'background: rgba(255, 149, 0, 0.08) !important;' +\n                'border: 1px solid rgba(255, 149, 0, 0.5) !important;' +\n                'box-shadow: inset 0 0 12px rgba(255, 149, 0, 0.12) !important;' +\n                'color: rgba(255, 255, 255, 0.95) !important;' +\n                'text-shadow: none !important;' +\n            '}' +\n            '#jh_combined_t3TrZy .jh-matrix-table td[data-label=\"GENERIC_AI\"]::before {' +\n                'color: rgba(255, 255, 255, 0.6) !important;' +\n            '}' +\n            \/* THE_AGENT \u2014 best (green), overrides blue *\/\n            \/* Winner pill: GREEN lives in the fill + border + glow (stronger now), so the\n               text can be crisp WHITE. Green-on-green-tint text was the low-visibility\n               culprit the user flagged on the row that matters most. *\/\n            '#jh_combined_t3TrZy .jh-matrix-table td.agent-cell {' +\n                'background: rgba(0, 255, 136, 0.15) !important;' +\n                'border: 1px solid rgba(0, 255, 136, 0.6) !important;' +\n                'box-shadow: inset 0 0 18px rgba(0, 255, 136, 0.24), 0 0 16px rgba(0, 255, 136, 0.15) !important;' +\n                'text-shadow: none !important;' +\n            '}' +\n            '#jh_combined_t3TrZy .jh-matrix-table td.agent-cell::before {' +\n                'color: #ffffff !important;' +\n            '}' +\n            '#jh_combined_t3TrZy .jh-matrix-table td.agent-cell::after {' +\n                'border-left-color: rgba(0, 255, 136, 0.35) !important;' +\n                'border-right-color: rgba(0, 255, 136, 0.35) !important;' +\n            '}' +\n            '#jh_combined_t3TrZy .jh-matrix-table td.agent-cell .jh-agent-value-box {' +\n                'color: #ffffff !important;' +\n                'text-shadow: none !important;' +\n            '}' +\n            \/* Restack each metric card as a vertical labeled comparison:\n               Manual (red) -> Generic AI (amber) -> JUST HIRED (green, dominant).\n               Single-column rows; label left via ::before, value pushed right.\n               NOTE: `tbody` is in every selector on purpose -> the static <style>\n               block renders in <body> (later doc order) so equal-specificity\n               !important rules there beat this head-injected sheet. tbody bumps\n               specificity above the static `.jh-matrix-table td`\/`tr` rules. *\/\n            '#jh_combined_t3TrZy .jh-matrix-table tbody tr { grid-template-columns: 1fr !important; gap: 8px !important; }' +\n            '#jh_combined_t3TrZy .jh-matrix-table tbody .metric-label { text-align: left !important; margin-bottom: 4px !important; grid-column: 1 \/ -1 !important; }' +\n            '#jh_combined_t3TrZy .jh-matrix-table tbody td {' +\n                'display: flex !important;' +\n                'align-items: center !important;' +\n                'justify-content: space-between !important;' +\n                'text-align: left !important;' +\n                'gap: 12px !important;' +\n                'padding: 11px 14px !important;' +\n                'font-size: 13px !important;' +\n                'font-weight: 600 !important;' +\n            '}' +\n            '#jh_combined_t3TrZy .jh-matrix-table tbody td::before {' +\n                'display: inline-block !important;' +\n                'margin: 0 !important;' +\n                'font-size: 10px !important;' +\n                'font-weight: 700 !important;' +\n                'letter-spacing: 1.5px !important;' +\n                'white-space: nowrap !important;' +\n            '}' +\n            \/* Winner row: dominant green pill spanning full width *\/\n            '#jh_combined_t3TrZy .jh-matrix-table tbody td.agent-cell { grid-column: 1 \/ -1 !important; padding: 15px !important; margin-top: 2px !important; }' +\n            \/* The agent cell shares its single ::before with the absolutely-positioned\n               scanner overlay (.agent-cell::before). Reclaim it as an in-flow label so\n               it becomes a flex sibling of the value box (label left \/ value right).\n               Drops the decorative scan on this one cell, mobile-only. *\/\n            '#jh_combined_t3TrZy .jh-matrix-table tbody td.agent-cell::before {' +\n                'content: attr(data-label) !important;' +\n                'position: static !important;' +\n                'width: auto !important;' +\n                'height: auto !important;' +\n                'background: none !important;' +\n                'animation: none !important;' +\n                'font-size: 11px !important;' +\n                'font-weight: 800 !important;' +\n            '}' +\n            '#jh_combined_t3TrZy .jh-matrix-table tbody td.agent-cell .jh-agent-value-box { padding: 0 !important; font-size: clamp(18px, 5vw, 22px) !important; font-weight: 800 !important; }' +\n        '}' +\n        '#jh_combined_t3TrZy .diag-subtitle-cta {' +\n            'color: #00ff88 !important;' +\n            'text-shadow: 0 0 10px rgba(0, 255, 136, 0.55) !important;' +\n            'font-family: \"Geist Mono\", \"JetBrains Mono\", monospace !important;' +\n            'font-size: 11px !important;' +\n            'font-weight: 700 !important;' +\n            'letter-spacing: 0.18em !important;' +\n            'text-transform: uppercase !important;' +\n            'margin: 8px 0 0 !important;' +\n            'display: inline-block !important;' +\n            'padding: 0 !important;' +\n            'border: 0 !important;' +\n            'border-radius: 0 !important;' +\n            'background: transparent !important;' +\n            'text-decoration: underline !important;' +\n            'text-decoration-color: rgba(0, 255, 136, 0.45) !important;' +\n            'text-decoration-thickness: 1px !important;' +\n            'text-underline-offset: 5px !important;' +\n        '}' +\n        \/* Anti-hallucination proof panel (new selectors -> injected to dodge inline-style tree-shaking) *\/\n        '#jh_combined_t3TrZy .jh-hx-proof { display:flex; flex-direction:column; gap:14px; margin-top:30px; flex-grow:1; }' +\n        '#jh_combined_t3TrZy .jh-hx-row { position:relative; border:1px solid rgba(255,255,255,0.08); border-radius:14px; padding:18px; background:rgba(255,255,255,0.02); }' +\n        '#jh_combined_t3TrZy .jh-hx-bad { border-color:rgba(255,80,80,0.38); background:rgba(255,80,80,0.06); }' +\n        '#jh_combined_t3TrZy .jh-hx-good { border-color:rgba(0,255,136,0.45); background:rgba(0,255,136,0.06); }' +\n        '#jh_combined_t3TrZy .jh-hx-tag { display:flex; align-items:center; gap:8px; font-family:\"Geist Mono\",\"JetBrains Mono\",monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase; margin-bottom:10px; }' +\n        '#jh_combined_t3TrZy .jh-hx-bad .jh-hx-tag { color:#ff8a8a; }' +\n        '#jh_combined_t3TrZy .jh-hx-good .jh-hx-tag { color:#00ff88; }' +\n        '#jh_combined_t3TrZy .jh-hx-mark { font-size:13px; font-weight:900; }' +\n        '#jh_combined_t3TrZy .jh-hx-claim { font-family:\"Geist Mono\",\"JetBrains Mono\",monospace; font-size:13px; line-height:1.5; color:#fff; margin:0 0 10px; }' +\n        '#jh_combined_t3TrZy .jh-hx-bad .jh-hx-claim { text-decoration:line-through; text-decoration-color:rgba(255,80,80,0.6); opacity:0.85; }' +\n        '#jh_combined_t3TrZy .jh-hx-note { font-size:12px; line-height:1.55; color:rgba(255,255,255,0.55); margin:0; }' +\n        '#jh_combined_t3TrZy .jh-hx-divider { text-align:center; color:rgba(255,255,255,0.4); font-size:10px; letter-spacing:3px; margin:2px 0; }' +\n        '#jh_combined_t3TrZy .jh-hx-cta { margin-top:24px; align-self:center; }' +\n        \/* Matrix header row \u2014 per-column color coding + white METRIC column (desktop\/tablet; thead hidden <=768px) *\/\n        '#jh_combined_t3TrZy .jh-matrix-table th.metric-label { color:#ffffff; font-weight:500; }' +\n        '#jh_combined_t3TrZy .jh-matrix-table thead th.jh-th-manual { color:#ff8a8a; }' +\n        '#jh_combined_t3TrZy .jh-matrix-table thead th.jh-th-genai { color:#ffb84d; }' +\n        '#jh_combined_t3TrZy .jh-matrix-table thead th.agent-col-glow { color:#00ff88; text-shadow:0 0 6px rgba(0,255,136,0.45); }';\n    (document.head || document.documentElement).appendChild(s);\n})();\n<\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-96d418c elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"96d418c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-6de5bee exad-sticky-section-no\" data-id=\"6de5bee\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-becba57 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"becba57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<div id=\"jh_sdiag_SFjWZA\" class=\"jh-sdiag-wrapper\" role=\"region\" aria-label=\"Job search diagnostic\" data-jh-component=\"Diagnostic\">\n    <div class=\"jh-sdiag-bg-glow\"><\/div>\n\n    <div class=\"jh-sdiag-inner\">\n\n        <!-- LEFT COLUMN (desktop) \/ TOP (mobile): the funnel-reality narrative.\n             Pure copy + a schematic funnel; contains none of the JS-targeted\n             classes (.jh-step \/ .jh-apps-slider \/ etc.), so it cannot affect the\n             Diagnostic JS, which queries those by descendant lookup. All styling\n             lives in style.css (.jh-sdiag-* selectors) to dodge the inline-CSS\n             optimizer. Bar widths are schematic (set via --w); the exact ratios\n             live in the labels. -->\n        <div class=\"jh-sdiag-narrative\">\n            <span class=\"jh-mini-heading mono\">&#9654; THE REALITY<\/span>\n\n            <h2 class=\"jh-sdiag-reality-headline\">\n                Hundreds of applications.<br>\n                Months of interviews.<br>\n                <span class=\"jh-sdiag-reality-yes\">One yes.<\/span>\n            <\/h2>\n\n            <p class=\"jh-sdiag-reality-lede\">\n                That&rsquo;s the modern job search &mdash; and most of it is decided\n                before a human ever reads your name.\n            <\/p>\n\n            <ul class=\"jh-sdiag-funnel\" aria-label=\"Typical job-search funnel, industry averages\">\n                <li class=\"jh-sdiag-funnel-row\" style=\"--w:100%\">\n                    <span class=\"jh-sdiag-funnel-track\"><span class=\"jh-sdiag-funnel-bar\"><\/span><\/span>\n                    <span class=\"jh-sdiag-funnel-body\">\n                        <b class=\"jh-sdiag-funnel-num\">100&ndash;200+<\/b>\n                        <span class=\"jh-sdiag-funnel-label\">applications submitted<\/span>\n                    <\/span>\n                <\/li>\n                <li class=\"jh-sdiag-funnel-row\" style=\"--w:34%\">\n                    <span class=\"jh-sdiag-funnel-track\"><span class=\"jh-sdiag-funnel-bar\"><\/span><\/span>\n                    <span class=\"jh-sdiag-funnel-body\">\n                        <b class=\"jh-sdiag-funnel-num\">3&ndash;5<\/b>\n                        <span class=\"jh-sdiag-funnel-label\">interviews landed &middot; only ~1 in 42 apps gets one (2.4%)<\/span>\n                    <\/span>\n                <\/li>\n                <li class=\"jh-sdiag-funnel-row jh-sdiag-funnel-row--win\" style=\"--w:10%\">\n                    <span class=\"jh-sdiag-funnel-track\"><span class=\"jh-sdiag-funnel-bar\"><\/span><\/span>\n                    <span class=\"jh-sdiag-funnel-body\">\n                        <b class=\"jh-sdiag-funnel-num\">1<\/b>\n                        <span class=\"jh-sdiag-funnel-label\">offer &middot; only ~1 in 5 interviews convert<\/span>\n                    <\/span>\n                <\/li>\n            <\/ul>\n\n            <p class=\"jh-sdiag-funnel-foot mono\">Industry averages &middot; ~5-month search &middot; NACE, Glassdoor &amp; 2024&ndash;25 hiring data<\/p>\n\n            <p class=\"jh-sdiag-handoff\">\n                So &mdash; where do <em>your<\/em> numbers land?\n                <span class=\"jh-sdiag-handoff-arrow\" aria-hidden=\"true\">&rarr;<\/span>\n            <\/p>\n        <\/div>\n\n        <header class=\"jh-sdiag-header\">\n            <span class=\"jh-mini-heading mono\">&#9654; SYSTEM_PROTOCOL: DIAGNOSTIC_ANALYSIS<\/span>\n            <h2 class=\"jh-sdiag-title\">How is your search going?<\/h2>\n            <p class=\"diag-subtitle-cta\">THREE QUESTIONS &mdash; INSTANT DIAGNOSIS<\/p>\n        <\/header>\n\n        <div class=\"jh-diagnostic-card\">\n            <div class=\"diagnostic-steps\">\n                <!-- Step 1 -->\n                <div class=\"jh-step active\" data-step=\"1\">\n                    <label class=\"mono text-xs uppercase mb-4 block\" for=\"jh_sdiag_SFjWZA_apps\">01 \/\/ APPLICATIONS SENT SO FAR<\/label>\n                    <div class=\"jh-input-container\">\n                        <input type=\"range\" min=\"0\" max=\"100\" value=\"0\" class=\"jh-range-2026 jh-apps-slider\" id=\"jh_sdiag_SFjWZA_apps\" aria-label=\"Number of applications sent\">\n                        <div class=\"jh-val-display mono\" aria-live=\"polite\"><span class=\"jh-apps-val\">0<\/span><\/div>\n                    <\/div>\n                    <button class=\"jh-btn-2026\" onclick=\"jh_2026_nextStep('jh_sdiag_SFjWZA', 2)\">\n                        <span>START_DIAGNOSTIC<\/span>\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n                    <\/button>\n                <\/div>\n\n                <!-- Step 2 -->\n                <div class=\"jh-step\" data-step=\"2\">\n                    <label class=\"mono text-xs uppercase mb-4 block\" for=\"jh_sdiag_SFjWZA_rate\">02 \/\/ INTERVIEWS GENERATED<\/label>\n                    <div class=\"jh-input-container\">\n                        <input type=\"range\" min=\"0\" max=\"12\" value=\"0\" class=\"jh-range-2026 jh-rate-slider\" id=\"jh_sdiag_SFjWZA_rate\" aria-label=\"Number of interviews received\">\n                        <div class=\"jh-val-display mono\" aria-live=\"polite\"><span class=\"jh-rate-val\">0<\/span><\/div>\n                    <\/div>\n                    <button class=\"jh-btn-2026\" onclick=\"jh_2026_nextStep('jh_sdiag_SFjWZA', 3)\">\n                        <span>INITIATE_ANALYSIS<\/span>\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n                    <\/button>\n                <\/div>\n\n                <!-- Step 3 -->\n                <div class=\"jh-step\" data-step=\"3\">\n                    <label id=\"jh_sdiag_SFjWZA_target_label\" class=\"mono text-xs uppercase mb-4 block\">03 \/\/ INDUSTRY YOU&rsquo;RE TARGETING<\/label>\n                    <div class=\"jh-target-list\" role=\"group\" aria-labelledby=\"jh_sdiag_SFjWZA_target_label\">\n                        <button class=\"target-opt-2026\" onclick=\"jh_2026_calculate('jh_sdiag_SFjWZA', 'TECH')\">TECHNOLOGY<\/button>\n                        <button class=\"target-opt-2026\" onclick=\"jh_2026_calculate('jh_sdiag_SFjWZA', 'TECH')\">FINANCE<\/button>\n                        <button class=\"target-opt-2026\" onclick=\"jh_2026_calculate('jh_sdiag_SFjWZA', 'F500')\">HEALTHCARE<\/button>\n                        <button class=\"target-opt-2026\" onclick=\"jh_2026_calculate('jh_sdiag_SFjWZA', 'OTHER')\">SALES &amp; MARKETING<\/button>\n                        <button class=\"target-opt-2026\" onclick=\"jh_2026_calculate('jh_sdiag_SFjWZA', 'F500')\">OPERATIONS<\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Loading -->\n                <div class=\"jh-step jh-step-loading\">\n                    <div class=\"loading-ui\">\n                        <div class=\"loading-ring\" role=\"status\" aria-label=\"Calibrating vectors\"><\/div>\n                        <p class=\"mono text-xs mt-4 text-glow\">CALIBRATING_VECTORS...<\/p>\n                    <\/div>\n                <\/div>\n\n                <!-- Result -->\n                <div class=\"jh-step jh-step-result\">\n                    <div class=\"result-ui\">\n                        <span class=\"mono text-xs text-dim\">DIAGNOSTIC_COMPLETE<\/span>\n                        <h2 class=\"jh-result-text mono text-glow\">SIGNAL: <span class=\"jh-strength-level\">WEAK<\/span><\/h2>\n                        <a href=\"https:\/\/app.justhired.ai\/dashboard_v2_0\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"jh-cta-2026\" aria-label=\"Start Just Hired for free\">\n                            See what Just Hired changes &rarr;\n                        <\/a>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<style>\n\/* ============================================================================\n   Search Diagnostic \u2014 self-contained, scoped to #jh_sdiag_SFjWZA   CSS ported from combined-signal-table.php (the diagnostic card) and re-scoped.\n   ============================================================================ *\/\n#jh_sdiag_SFjWZA, #jh_sdiag_SFjWZA * { box-sizing: border-box; }\n\n#jh_sdiag_SFjWZA {\n    --jh-bg: #030303;\n    --jh-accent: #0554F2;\n    --jh-accent-glow: rgba(5, 84, 242, 0.5);\n    --jh-glass: rgba(10, 10, 10, 0.4);\n    --jh-border: rgba(255, 255, 255, 0.08);\n    --jh-text: #ffffff;\n    --jh-text-dim: rgba(255, 255, 255, 0.4);\n    --jh-agent: #60B0FF;\n    --jh-space-xs: 8px;  --jh-space-sm: 15px; --jh-space-md: 20px;\n    --jh-space-lg: 30px; --jh-space-xl: 40px; --jh-space-2xl: 60px; --jh-space-3xl: 80px;\n    --jh-transition-fast: 0.2s; --jh-transition-base: 0.3s; --jh-transition-slow: 0.4s;\n    --jh-easing: cubic-bezier(0.23, 1, 0.32, 1);\n    --jh-font-mono: 'Geist Mono', 'JetBrains Mono', 'Courier New', monospace;\n    --jh-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n#jh_sdiag_SFjWZA.jh-sdiag-wrapper {\n    background: var(--jh-bg);\n    padding: clamp(var(--jh-space-2xl), 8vh, var(--jh-space-3xl)) var(--jh-space-md);\n    font-family: var(--jh-font-sans);\n    color: var(--jh-text);\n    position: relative;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: 100% !important;\n    max-width: 100% !important;\n}\n\n\/* Full-bleed on mobile per brand rule *\/\n@media (max-width: 720px) {\n    #jh_sdiag_SFjWZA.jh-sdiag-wrapper {\n        margin-left: calc(50% - 50vw);\n        margin-right: calc(50% - 50vw);\n        width: 100vw;\n        max-width: 100vw;\n    }\n}\n\n#jh_sdiag_SFjWZA .jh-sdiag-bg-glow {\n    position: absolute;\n    inset: 0;\n    background:\n        radial-gradient(at 50% 0%, rgba(5, 84, 242, 0.12) 0px, transparent 55%),\n        radial-gradient(at 50% 100%, rgba(96, 176, 255, 0.06) 0px, transparent 55%);\n    filter: blur(100px);\n    opacity: 0.6;\n    pointer-events: none;\n    z-index: 0;\n}\n\n#jh_sdiag_SFjWZA .jh-sdiag-inner {\n    position: relative;\n    z-index: 1;\n    width: 100%;\n    max-width: 560px;\n    margin: 0 auto;\n}\n\n\/* Header *\/\n#jh_sdiag_SFjWZA .jh-sdiag-header { text-align: center; margin-bottom: var(--jh-space-xl); }\n\n#jh_sdiag_SFjWZA .mono {\n    font-family: var(--jh-font-mono);\n    letter-spacing: 2px;\n    font-size: clamp(8px, 0.9vw, 10px);\n    text-transform: uppercase;\n}\n#jh_sdiag_SFjWZA .jh-mini-heading {\n    color: var(--jh-agent);\n    display: block;\n    font-weight: 600;\n    margin-bottom: var(--jh-space-xs);\n    text-shadow: 0 0 10px rgba(96, 176, 255, 0.3);\n}\n#jh_sdiag_SFjWZA .jh-sdiag-title {\n    font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n    font-size: clamp(26px, 4vw, 36px);\n    line-height: 1.1;\n    font-weight: 800;\n    letter-spacing: -0.5px;\n    margin: var(--jh-space-sm) 0 var(--jh-space-xs);\n    color: var(--jh-text);\n}\n#jh_sdiag_SFjWZA .diag-subtitle-cta {\n    color: #00ff88;\n    text-shadow: 0 0 10px rgba(0, 255, 136, 0.55);\n    font-family: var(--jh-font-mono);\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 0.18em;\n    text-transform: uppercase;\n    margin: var(--jh-space-xs) 0 0;\n    display: inline-block;\n    text-decoration: underline;\n    text-decoration-color: rgba(0, 255, 136, 0.45);\n    text-decoration-thickness: 1px;\n    text-underline-offset: 5px;\n}\n\n\/* Utilities *\/\n#jh_sdiag_SFjWZA .text-glow { color: var(--jh-accent); text-shadow: 0 0 10px var(--jh-accent-glow); }\n#jh_sdiag_SFjWZA .text-xs { font-size: 12px; }\n#jh_sdiag_SFjWZA .text-dim { color: var(--jh-text-dim); }\n#jh_sdiag_SFjWZA .uppercase { text-transform: uppercase; }\n#jh_sdiag_SFjWZA .mb-4 { margin-bottom: 16px; }\n#jh_sdiag_SFjWZA .mt-4 { margin-top: 16px; }\n#jh_sdiag_SFjWZA .block { display: block; }\n\n\/* Diagnostic card \u2014 HUD treatment *\/\n#jh_sdiag_SFjWZA .jh-diagnostic-card {\n    position: relative;\n    background: rgba(5, 84, 242, 0.05);\n    border: 1px solid var(--jh-border);\n    border-radius: 24px;\n    padding: clamp(var(--jh-space-md), 4vw, 35px);\n    box-shadow: inset 0 0 20px rgba(5, 84, 242, 0.3), 0 20px 50px rgba(0, 0, 0, 0.5);\n    -webkit-backdrop-filter: blur(40px);\n    backdrop-filter: blur(40px);\n    overflow: hidden;\n}\n\/* HUD corner accents *\/\n#jh_sdiag_SFjWZA .jh-diagnostic-card::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    z-index: 10;\n    background:\n        linear-gradient(to right, var(--jh-accent) 2px, transparent 2px) 0 0 \/ 20px 2px no-repeat,\n        linear-gradient(to bottom, var(--jh-accent) 2px, transparent 2px) 0 0 \/ 2px 20px no-repeat,\n        linear-gradient(to left, var(--jh-accent) 2px, transparent 2px) 100% 0 \/ 20px 2px no-repeat,\n        linear-gradient(to bottom, var(--jh-accent) 2px, transparent 2px) 100% 0 \/ 2px 20px no-repeat,\n        linear-gradient(to right, var(--jh-accent) 2px, transparent 2px) 0 100% \/ 20px 2px no-repeat,\n        linear-gradient(to top, var(--jh-accent) 2px, transparent 2px) 0 100% \/ 2px 20px no-repeat,\n        linear-gradient(to left, var(--jh-accent) 2px, transparent 2px) 100% 100% \/ 20px 2px no-repeat,\n        linear-gradient(to top, var(--jh-accent) 2px, transparent 2px) 100% 100% \/ 2px 20px no-repeat;\n}\n\n\/* Steps *\/\n#jh_sdiag_SFjWZA .diagnostic-steps { position: relative; z-index: 1; }\n#jh_sdiag_SFjWZA .jh-step { display: none; flex-direction: column; min-height: 250px; }\n#jh_sdiag_SFjWZA .jh-step.active { display: flex; }\n\n#jh_sdiag_SFjWZA .jh-step label {\n    color: rgba(255, 255, 255, 0.9);\n    letter-spacing: 2px;\n}\n\n#jh_sdiag_SFjWZA .jh-input-container { width: 100%; }\n#jh_sdiag_SFjWZA .jh-val-display {\n    font-size: clamp(48px, 12vw, 64px);\n    font-weight: 900;\n    text-align: center;\n    margin: var(--jh-space-md) 0;\n    color: var(--jh-text);\n    text-shadow: 0 0 30px var(--jh-accent-glow), 0 0 10px rgba(255, 255, 255, 0.5);\n}\n\n\/* Range slider *\/\n#jh_sdiag_SFjWZA .jh-range-2026 {\n    -webkit-appearance: none; appearance: none;\n    width: 100%; height: 8px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 10px; outline: none; cursor: pointer;\n}\n#jh_sdiag_SFjWZA .jh-range-2026::-webkit-slider-thumb {\n    -webkit-appearance: none; appearance: none;\n    width: 24px; height: 24px;\n    background: var(--jh-bg);\n    border: 2px solid var(--jh-accent);\n    border-radius: 50%; cursor: pointer;\n    box-shadow: 0 0 15px var(--jh-accent-glow);\n    transition: transform var(--jh-transition-fast), background var(--jh-transition-fast);\n}\n#jh_sdiag_SFjWZA .jh-range-2026::-moz-range-thumb {\n    width: 24px; height: 24px;\n    background: var(--jh-bg);\n    border: 2px solid var(--jh-accent);\n    border-radius: 50%; cursor: pointer;\n    box-shadow: 0 0 15px var(--jh-accent-glow);\n    transition: transform var(--jh-transition-fast), background var(--jh-transition-fast);\n}\n#jh_sdiag_SFjWZA .jh-range-2026::-webkit-slider-thumb:hover { transform: scale(1.1); background: var(--jh-accent); }\n#jh_sdiag_SFjWZA .jh-range-2026::-moz-range-thumb:hover { transform: scale(1.1); background: var(--jh-accent); }\n\n\/* Primary button *\/\n#jh_sdiag_SFjWZA .jh-btn-2026 {\n    background: linear-gradient(135deg, var(--jh-accent), #0339a6);\n    color: var(--jh-text);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    padding: 18px;\n    border-radius: 12px;\n    font-family: var(--jh-font-mono);\n    font-size: 14px; font-weight: 700;\n    cursor: pointer;\n    display: flex; align-items: center; justify-content: center; gap: 10px;\n    transition: all var(--jh-transition-base) ease;\n    margin-top: auto;\n    width: 100%;\n}\n#jh_sdiag_SFjWZA .jh-btn-2026:hover { background: var(--jh-accent); box-shadow: 0 0 30px var(--jh-accent-glow); transform: translateY(-2px); }\n#jh_sdiag_SFjWZA .jh-btn-2026:focus-visible { outline: 2px solid var(--jh-accent); outline-offset: 4px; }\n#jh_sdiag_SFjWZA .jh-btn-2026:active { filter: brightness(1.2); transform: scale(0.98); }\n\n\/* Target options *\/\n#jh_sdiag_SFjWZA .jh-target-list { margin-top: var(--jh-space-lg); display: flex; flex-direction: column; gap: 14px; }\n#jh_sdiag_SFjWZA .target-opt-2026 {\n    background: rgba(255, 255, 255, 0.02);\n    border: 1px solid var(--jh-border);\n    color: var(--jh-text);\n    padding: var(--jh-space-md) 24px;\n    border-radius: 12px;\n    font-family: var(--jh-font-mono);\n    font-size: 11px; text-align: left; cursor: pointer; width: 100%;\n    transition: all var(--jh-transition-base) var(--jh-easing);\n}\n#jh_sdiag_SFjWZA .target-opt-2026:hover { border-color: var(--jh-accent); background: rgba(5, 84, 242, 0.1); padding-left: var(--jh-space-lg); }\n#jh_sdiag_SFjWZA .target-opt-2026:focus-visible { outline: 2px solid var(--jh-accent); outline-offset: 4px; }\n#jh_sdiag_SFjWZA .target-opt-2026:active { filter: brightness(1.2); transform: scale(0.98); }\n\n\/* Loading + result *\/\n#jh_sdiag_SFjWZA .loading-ui, #jh_sdiag_SFjWZA .result-ui {\n    flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;\n}\n#jh_sdiag_SFjWZA .loading-ring {\n    width: 40px; height: 40px;\n    border: 2px solid rgba(255, 255, 255, 0.1);\n    border-top-color: var(--jh-accent);\n    border-radius: 50%;\n    animation: jh_sdiag_spin 1s infinite linear;\n}\n#jh_sdiag_SFjWZA .jh-result-text { font-size: 24px; margin: var(--jh-space-md) 0; }\n#jh_sdiag_SFjWZA .jh-strength-level {\n    text-shadow: 0 0 15px currentColor, 0 0 30px currentColor;\n    font-weight: 900;\n}\n#jh_sdiag_SFjWZA .jh-cta-2026 {\n    background: var(--jh-text);\n    color: var(--jh-bg);\n    text-decoration: none;\n    padding: 18px var(--jh-space-lg);\n    border-radius: 100px;\n    font-family: var(--jh-font-mono);\n    font-size: 14px; font-weight: 700;\n    transition: all var(--jh-transition-base) ease;\n    display: inline-block;\n}\n#jh_sdiag_SFjWZA .jh-cta-2026:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255, 255, 255, 0.3); }\n#jh_sdiag_SFjWZA .jh-cta-2026:focus-visible { outline: 2px solid var(--jh-text); outline-offset: 4px; }\n#jh_sdiag_SFjWZA .jh-cta-2026:active { filter: brightness(1.2); transform: scale(0.98); }\n\n@keyframes jh_sdiag_spin { to { transform: rotate(360deg); } }\n\n@media (prefers-reduced-motion: reduce) {\n    #jh_sdiag_SFjWZA * {\n        animation-duration: 0.01ms !important;\n        animation-iteration-count: 1 !important;\n        transition-duration: 0.01ms !important;\n    }\n}\n<\/style>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a27b76f elementor-section-full_width elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"a27b76f\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d3a5c35 exad-sticky-section-no\" data-id=\"d3a5c35\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5b804c6 exad-sticky-section-no elementor-widget elementor-widget-shortcode\" data-id=\"5b804c6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><section class=\"jh-fcta\" data-jh-section=\"final-cta\" role=\"region\" aria-label=\"Get started with Just Hired\">\n    <div class=\"jh-fcta-glow\" aria-hidden=\"true\"><\/div>\n    <div class=\"jh-fcta-inner\">\n\n        <span class=\"jh-fcta-eyebrow jh-mono\">&#9654; Start free<\/span>\n\n        <h2 class=\"jh-fcta-headline\">\n            Apply in 3 minutes. <span class=\"jh-fcta-accent\">Not 45.<\/span>\n        <\/h2>\n\n        <p class=\"jh-fcta-sub\">\n            Know your gaps, decode every posting, and tailor every application &mdash;\n            the same intelligence recruiters have. The recruiter&rsquo;s playbook, yours to keep.\n        <\/p>\n\n        <div class=\"jh-fcta-btns\">\n            <a class=\"btn-p\" href=\"https:\/\/app.justhired.ai\/\">\n                Start free\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\n            <\/a>\n            <a class=\"btn-g\" href=\"https:\/\/chrome.google.com\/webstore\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM12 19.5c-3.315 0-6.228-1.695-7.95-4.274L7.8 9.9A4.488 4.488 0 0 0 12 12a4.488 4.488 0 0 0 4.2-2.1l3.75 5.326C18.228 17.805 15.315 19.5 12 19.5z\"\/><\/svg>\n                Add to Chrome\n            <\/a>\n        <\/div>\n\n        <p class=\"jh-fcta-meta jh-mono\">Free plan &middot; no credit card required<\/p>\n\n    <\/div>\n<\/section>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8fb07d6 elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default exad-sticky-section-no\" data-id=\"8fb07d6\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9e1d571 exad-sticky-section-no\" data-id=\"9e1d571\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-efad023 exad-sticky-section-no elementor-widget elementor-widget-html\" data-id=\"efad023\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n\/* JH Footer styles \u2014 loaded here so this file is self-contained *\/\n.jh-footer{background:#0b1221;border-top:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}\n.jh-footer::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(5,84,242,.003) 3px,rgba(5,84,242,.003) 4px)}\n.jh-footer::after{content:'';position:absolute;top:0;left:0;width:480px;height:300px;pointer-events:none;background:radial-gradient(ellipse at top left,rgba(5,84,242,.07) 0%,transparent 60%)}\n.jf-grid{max-width:1080px;margin:0 auto;padding:64px 40px 52px;display:grid;grid-template-columns:1fr repeat(4,1fr);gap:48px 40px;position:relative;z-index:1;align-items:start}\n.jf-logo{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:20px;color:rgba(255,255,255,.92);text-decoration:none;letter-spacing:-.02em;display:block;margin-bottom:14px}\n.jf-logo span{color:#0554F2}\n.jf-tagline{font-size:13px;color:rgba(255,255,255,.75);font-weight:500;margin-bottom:10px;line-height:1.5;font-style:italic}\n.jf-desc{font-size:12.5px;color:rgba(255,255,255,.4);line-height:1.75;margin-bottom:24px;max-width:230px}\n.jf-btn-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n.jf-btn-start{background:linear-gradient(135deg,#0554F2,#3B82F6);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 2px 12px rgba(5,84,242,.38);transition:box-shadow .18s,transform .12s;display:inline-flex;align-items:center}\n.jf-btn-start:hover{box-shadow:0 4px 18px rgba(5,84,242,.55);transform:translateY(-1px)}\n.jf-btn-chrome{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.5);border-radius:8px;padding:10px 14px;font-size:11.5px;font-weight:600;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .15s,color .15s,border-color .15s}\n.jf-btn-chrome:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.18)}\n.jf-chrome-icon{width:13px;height:13px;flex-shrink:0}\n.jf-col{display:flex;flex-direction:column;align-items:flex-start}.jf-col-label{font-family:'Geist Mono','JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(96,176,255,.85);margin-bottom:18px}\n.jf-links{list-style:none;display:flex;flex-direction:column;gap:11px}\n.jf-links a{color:rgba(255,255,255,.48);text-decoration:none;font-size:13px;transition:color .15s;display:block;line-height:1.2}\n.jf-links a:hover{color:rgba(255,255,255,.82)}\n.jf-bar{border-top:1px solid rgba(255,255,255,.045);padding:18px 40px;position:relative;z-index:1}\n.jf-bar-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}\n.jf-copy{display:flex;align-items:center;gap:18px;font-size:11px;color:rgba(255,255,255,.55)}\n.jf-status{font-family:'Geist Mono','JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(96,176,255,.85);display:flex;align-items:center;gap:6px}\n.jf-live-dot{width:5px;height:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 4px rgba(34,197,94,.45);animation:jf-live 1.6s ease-in-out infinite}\n@keyframes jf-live{0%,100%{opacity:1}50%{opacity:.25}}\n.jf-legal{display:flex;align-items:center;gap:20px}\n.jf-legal a{font-size:11px;color:rgba(255,255,255,.55) !important;text-decoration:none;transition:color .15s}\n.jf-legal a:hover{color:rgba(255,255,255,.9)}\n@media(max-width:960px){.jf-grid{grid-template-columns:1fr 1fr 1fr;padding:48px 32px 40px;gap:32px}.jf-brand{grid-column:span 3}.jf-links{gap:2px}.jf-links a{padding:12px 0}.jf-legal a{padding:10px 0}}\n@media(max-width:640px){.jf-grid{grid-template-columns:1fr 1fr;padding:40px 20px 32px;gap:28px 20px}.jf-brand{grid-column:span 2}.jf-bar{padding:16px 20px}.jf-bar-inner{flex-direction:column;align-items:flex-start;gap:12px}.jf-legal{flex-wrap:wrap;gap:14px}.jf-desc{max-width:none}}\n@media(max-width:360px){.jf-grid{grid-template-columns:1fr}.jf-brand{grid-column:span 1}}\n<\/style>\n\n<footer class=\"jh-footer\">\n  <div class=\"jf-grid\">\n\n    <div class=\"jf-brand\">\n      <a href=\"\/\" class=\"jf-logo\">JUST H<span>|<\/span>RED<\/a>\n      <p class=\"jf-tagline\">\"The recruiter's playbook.<br>Yours to keep.\"<\/p>\n      <p class=\"jf-desc\">AI-powered job intelligence that gives candidates the same information recruiters have. Know your gaps. Decode every posting. Apply in 3 minutes, not 45.<\/p>\n      <div class=\"jf-btn-row\">\n        <a href=\"https:\/\/app.justhired.ai\/\" class=\"jf-btn-start\">Start free \u2192<\/a>\n        <a href=\"https:\/\/chrome.google.com\/webstore\" class=\"jf-btn-chrome\">\n          <svg class=\"jf-chrome-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm0 4.5a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM12 19.5c-3.315 0-6.228-1.695-7.95-4.274L7.8 9.9A4.488 4.488 0 0 0 12 12a4.488 4.488 0 0 0 4.2-2.1l3.75 5.326C18.228 17.805 15.315 19.5 12 19.5z\"\/><\/svg>\n          Add to Chrome\n        <\/a>\n      <\/div>\n    <\/div>\n\n    <div class=\"jf-col\">\n      <div class=\"jf-col-label\">Product<\/div>\n      <ul class=\"jf-links\">\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/features\">All Features<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/extension\">Chrome Extension<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/how-it-works\">How It Works<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/pricing\">Pricing<\/a><\/li>\n      <\/ul>\n    <\/div>\n\n    <div class=\"jf-col\">\n      <div class=\"jf-col-label\">For You<\/div>\n      <ul class=\"jf-links\">\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/for\/career-changers\">Career Changers<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/for\/laid-off\">Re-entering<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/for\/new-grads\">New Graduates<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/for\/sales\">Sales Roles<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/for\/engineering\">Engineering Roles<\/a><\/li>\n      <\/ul>\n    <\/div>\n\n    <div class=\"jf-col\">\n      <div class=\"jf-col-label\">Compare<\/div>\n      <ul class=\"jf-links\">\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/vs\/teal\">Just Hired vs. Teal<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/vs\/jobscan\">Just Hired vs. Jobscan<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/vs\/rezi\">Just Hired vs. Rezi<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/vs\/kickresume\">Just Hired vs. Kickresume<\/a><\/li>\n      <\/ul>\n    <\/div>\n\n    <div class=\"jf-col\">\n      <div class=\"jf-col-label\">Company<\/div>\n      <ul class=\"jf-links\">\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/about\">About<\/a><\/li>\n                        <!-- <li><a href=\"https:\/\/justhired.ai\/clonev2\/blog\">Blog<\/a><\/li> -->\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/faq\">FAQ &amp; Support<\/a><\/li>\n        <li><a href=\"mailto:support@justhired.ai\">Contact Us<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/terms-of-service\">Terms of Service<\/a><\/li>\n        <li><a href=\"https:\/\/justhired.ai\/clonev2\/privacy-policy\">Privacy Policy<\/a><\/li>\n      <\/ul>\n    <\/div>\n\n  <\/div>\n\n  <div class=\"jf-bar\">\n    <div class=\"jf-bar-inner\">\n      <div class=\"jf-copy\">\n        <div class=\"jf-status\"><div class=\"jf-live-dot\"><\/div>SYSTEM_LIVE<\/div>\n        <span>\u00a9 2026 Just Hired \u00b7 All rights reserved<\/span>\n      <\/div>\n      <div class=\"jf-legal\">\n        <a href=\"https:\/\/justhired.ai\/clonev2\/terms-of-service\">Terms of Service<\/a>\n        <a href=\"https:\/\/justhired.ai\/clonev2\/privacy-policy\">Privacy Policy<\/a>\n        <a href=\"mailto:support@justhired.ai\">support@justhired.ai<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/footer>\n\n<script>\n(function(){\n  if (document.getElementById('jh-footer-mobile-align-injected')) return;\n  var s = document.createElement('style');\n  s.id = 'jh-footer-mobile-align-injected';\n  s.textContent = '@media(max-width:640px){.jh-footer .jf-links{padding:0;margin:0;list-style:none}}';\n  (document.head || document.documentElement).appendChild(s);\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-193","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home &#8212; Just Hired<\/title>\n<meta name=\"description\" content=\"Tailor your resume and cover letters to any job in minutes and get one step closer to landing your dream job. Fast, easy, and free to start!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/justhired.ai\/clonev2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home &#8212; Just Hired\" \/>\n<meta property=\"og:description\" content=\"Tailor your resume and cover letters to any job in minutes and get one step closer to landing your dream job. Fast, easy, and free to start!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/justhired.ai\/clonev2\/\" \/>\n<meta property=\"og:site_name\" content=\"Just Hired\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.instagram.com\/justhired.ai\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-26T16:19:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2024\/11\/footer-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"197\" \/>\n\t<meta property=\"og:image:height\" content=\"36\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/\",\"url\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/\",\"name\":\"Home &#8212; Just Hired\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#website\"},\"datePublished\":\"2024-11-19T08:05:52+00:00\",\"dateModified\":\"2026-05-26T16:19:36+00:00\",\"description\":\"Tailor your resume and cover letters to any job in minutes and get one step closer to landing your dream job. Fast, easy, and free to start!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#website\",\"url\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/\",\"name\":\"Just Hired\",\"description\":\"AI-powered job intelligence for serious candidates\",\"publisher\":{\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#organization\",\"name\":\"Just Hired\",\"url\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/cropped-favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/cropped-favicon-1.png\",\"width\":2267,\"height\":2221,\"caption\":\"Just Hired\"},\"image\":{\"@id\":\"https:\\\/\\\/justhired.ai\\\/clonev2\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/justhired.ai\\\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home &#8212; Just Hired","description":"Tailor your resume and cover letters to any job in minutes and get one step closer to landing your dream job. Fast, easy, and free to start!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/justhired.ai\/clonev2\/","og_locale":"en_US","og_type":"article","og_title":"Home &#8212; Just Hired","og_description":"Tailor your resume and cover letters to any job in minutes and get one step closer to landing your dream job. Fast, easy, and free to start!","og_url":"https:\/\/justhired.ai\/clonev2\/","og_site_name":"Just Hired","article_publisher":"https:\/\/www.instagram.com\/justhired.ai\/","article_modified_time":"2026-05-26T16:19:36+00:00","og_image":[{"width":197,"height":36,"url":"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2024\/11\/footer-logo.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/justhired.ai\/clonev2\/","url":"https:\/\/justhired.ai\/clonev2\/","name":"Home &#8212; Just Hired","isPartOf":{"@id":"https:\/\/justhired.ai\/clonev2\/#website"},"datePublished":"2024-11-19T08:05:52+00:00","dateModified":"2026-05-26T16:19:36+00:00","description":"Tailor your resume and cover letters to any job in minutes and get one step closer to landing your dream job. Fast, easy, and free to start!","breadcrumb":{"@id":"https:\/\/justhired.ai\/clonev2\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/justhired.ai\/clonev2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/justhired.ai\/clonev2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/justhired.ai\/clonev2\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/justhired.ai\/clonev2\/#website","url":"https:\/\/justhired.ai\/clonev2\/","name":"Just Hired","description":"AI-powered job intelligence for serious candidates","publisher":{"@id":"https:\/\/justhired.ai\/clonev2\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/justhired.ai\/clonev2\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Organization","@id":"https:\/\/justhired.ai\/clonev2\/#organization","name":"Just Hired","url":"https:\/\/justhired.ai\/clonev2\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/justhired.ai\/clonev2\/#\/schema\/logo\/image\/","url":"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2024\/12\/cropped-favicon-1.png","contentUrl":"https:\/\/justhired.ai\/clonev2\/wp-content\/uploads\/2024\/12\/cropped-favicon-1.png","width":2267,"height":2221,"caption":"Just Hired"},"image":{"@id":"https:\/\/justhired.ai\/clonev2\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/justhired.ai\/"]}]}},"_links":{"self":[{"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/pages\/193","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/comments?post=193"}],"version-history":[{"count":1610,"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/pages\/193\/revisions"}],"predecessor-version":[{"id":5288,"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/pages\/193\/revisions\/5288"}],"wp:attachment":[{"href":"https:\/\/justhired.ai\/clonev2\/wp-json\/wp\/v2\/media?parent=193"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}