:root {
            --bg-primary: #ffffff;
            --bg-secondary: #f8f9fa;
            --bg-tertiary: #f1f3f4;
            --text-primary: #1a1a1a;
            --text-secondary: #5f6368;
            --text-muted: #9aa0a6;
            --accent-orange: #e07a3a;
            --accent-orange-hover: #c96a2d;
            --accent-orange-light: #fef3ed;
            --accent-green: #34a853;
            --accent-green-light: #e6f4ea;
            --accent-yellow: #f9ab00;
            --accent-yellow-light: #fef7e0;
            --accent-red: #ea4335;
            --accent-red-light: #fce8e6;
            --accent-blue: #4285f4;
            --accent-blue-light: #e8f0fe;
            --border-color: #e0e0e0;
            --border-light: #eeeeee;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            --font-mono: 'JetBrains Mono', monospace;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: var(--font-sans); background: var(--bg-secondary); color: var(--text-primary); min-height: 100vh; line-height: 1.6; }
        .container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
        header { background: var(--bg-primary); border-bottom: 1px solid var(--border-light); position: sticky; top: 0; z-index: 100; }
        .header-content { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
        .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
        .logo-icon { width: 160px; height: 36px; }
        .logo-img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .logo-icon svg { width: 100%; height: 100%; }
        .logo-text { font-weight: 600; font-size: 20px; color: var(--text-primary); }
        .logo-text span { color: var(--accent-orange); }
        .nav-links { display: flex; align-items: center; gap: 32px; }
        .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 15px; font-weight: 500; transition: color 0.2s; }
        .nav-links a:hover { color: var(--text-primary); }
        .nav-btn { padding: 10px 20px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 100px; }
        .hero { padding: 60px 0 40px; text-align: center; background: var(--bg-primary); }
        .badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--accent-orange-light); border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--accent-orange); margin-bottom: 20px; }
        .badge-dot { width: 6px; height: 6px; background: var(--accent-orange); border-radius: 50%; }
        h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 700; line-height: 1.2; margin-bottom: 16px; }
        .hero-subtitle { font-size: 17px; color: var(--text-secondary); max-width: 560px; margin: 0 auto 32px; }
        .scan-section { max-width: 600px; margin: 0 auto; padding-bottom: 60px; }
        .scan-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-md); }
        .input-group { margin-bottom: 20px; }
        .input-label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
        .url-input-wrapper { display: flex; align-items: center; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
        .url-input-wrapper:focus-within { border-color: var(--accent-orange); box-shadow: 0 0 0 3px var(--accent-orange-light); }
        .url-prefix { padding: 0 14px; font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); border-right: 1px solid var(--border-color); background: var(--bg-secondary); height: 48px; display: flex; align-items: center; }
        .url-input { flex: 1; padding: 0 14px; height: 48px; background: transparent; border: none; font-family: var(--font-mono); font-size: 14px; color: var(--text-primary); outline: none; }
        .url-input::placeholder { color: var(--text-muted); }
        .email-input { width: 100%; padding: 0 14px; height: 48px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-primary); outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
        .email-input:focus { border-color: var(--accent-orange); box-shadow: 0 0 0 3px var(--accent-orange-light); }
        .checkbox-group { display: flex; align-items: flex-start; gap: 12px; margin: 24px 0; }
        .checkbox-input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent-orange); cursor: pointer; }
        .checkbox-label { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
        .checkbox-label a { color: var(--accent-orange); text-decoration: none; }
        .scan-btn { width: 100%; padding: 14px 28px; background: var(--accent-orange); border: none; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: white; cursor: pointer; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 10px; }
        .scan-btn:hover:not(:disabled) { background: var(--accent-orange-hover); }
        .scan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .scan-btn svg { width: 18px; height: 18px; }
        .progress-section { display: none; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--border-light); }
        .progress-section.active { display: block; }
        .progress-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .progress-title { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
        .progress-percent { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--accent-orange); }
        .progress-bar { height: 8px; background: var(--bg-tertiary); border-radius: 4px; overflow: hidden; }
        .progress-fill { height: 100%; background: var(--accent-orange); border-radius: 4px; width: 0%; transition: width 0.3s ease-out; }
        .progress-steps { margin-top: 20px; }
        .progress-step { display: flex; align-items: center; gap: 12px; padding: 8px 0; font-size: 13px; color: var(--text-muted); font-family: var(--font-mono); }
        .progress-step.active { color: var(--text-secondary); }
        .progress-step.complete { color: var(--accent-green); }
        .step-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
        .step-spinner { width: 16px; height: 16px; border: 2px solid var(--border-color); border-top-color: var(--accent-orange); border-radius: 50%; animation: spin 0.8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }
        .error-card { background: var(--accent-red-light); border: 1px solid var(--accent-red); border-radius: var(--radius-sm); padding: 20px; margin-top: 24px; display: none; }
        .error-card.active { display: block; }
        .error-title { font-size: 15px; font-weight: 600; color: var(--accent-red); margin-bottom: 6px; }
        .error-message { font-size: 14px; color: var(--text-secondary); }
        .results-section { display: none; padding: 40px 0 60px; }
        .results-section.active { display: block; }
        .results-header { text-align: center; margin-bottom: 40px; }
        .results-title { font-size: 28px; font-weight: 700; margin-bottom: 8px; }
        .results-url { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); }
        .score-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 40px; text-align: center; margin-bottom: 24px; box-shadow: var(--shadow-sm); }
        .score-gauge { position: relative; width: 200px; height: 200px; margin: 0 auto 24px; }
        .score-gauge svg { transform: rotate(-90deg); }
        .score-bg { fill: none; stroke: var(--bg-tertiary); stroke-width: 14; }
        .score-fill { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 502.65; stroke-dashoffset: 502.65; transition: stroke-dashoffset 1.5s ease-out; }
        .score-value { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
        .score-number { font-size: 56px; font-weight: 700; line-height: 1; }
        .score-label { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
        .score-rating { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
        .score-summary { font-size: 15px; color: var(--text-secondary); max-width: 420px; margin: 0 auto; }
        .rating-excellent { color: var(--accent-green); }
        .rating-good { color: var(--accent-blue); }
        .rating-moderate { color: var(--accent-yellow); }
        .rating-high-risk { color: var(--accent-red); }
        .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 32px; }
        .category-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; }
        .category-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
        .category-name { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
        .category-score { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
        .category-bar { height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; }
        .category-fill { height: 100%; border-radius: 3px; transition: width 1s ease-out; }
        .findings-section { margin-bottom: 32px; }
        .findings-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
        .findings-title { font-size: 18px; font-weight: 600; }
        .findings-count { padding: 4px 10px; background: var(--bg-tertiary); border-radius: 100px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
        .finding-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 12px; overflow: hidden; }
        .finding-header { padding: 16px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.2s; }
        .finding-header:hover { background: var(--bg-secondary); }
        .severity-badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
        .severity-critical { background: var(--accent-red-light); color: var(--accent-red); }
        .severity-high { background: #fff3e0; color: #e65100; }
        .severity-medium { background: var(--accent-yellow-light); color: #f57c00; }
        .severity-low, .severity-info { background: var(--accent-blue-light); color: var(--accent-blue); }
        .severity-pass { background: var(--accent-green-light); color: var(--accent-green); }
        .finding-title { flex: 1; font-size: 14px; font-weight: 500; }
        .finding-toggle { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: transform 0.2s; }
        .finding-card.expanded .finding-toggle { transform: rotate(180deg); }
        .finding-details { display: none; padding: 0 20px 20px; border-top: 1px solid var(--border-light); }
        .finding-card.expanded .finding-details { display: block; }
        .finding-description { font-size: 14px; color: var(--text-secondary); margin: 16px 0; line-height: 1.6; }
        .finding-why { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px; }
        .finding-why-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
        .finding-why-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
        .finding-fix { background: var(--accent-green-light); border-radius: var(--radius-sm); padding: 16px; }
        .finding-fix-title { font-size: 12px; font-weight: 600; color: var(--accent-green); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
        .finding-fix-text { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
        .finding-fix-text code { font-family: var(--font-mono); background: var(--bg-primary); padding: 2px 6px; border-radius: 4px; font-size: 12px; border: 1px solid var(--border-color); }
        .cta-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 48px; text-align: center; }
        .cta-icon { width: 56px; height: 56px; background: var(--accent-orange-light); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--accent-orange); }
        .cta-title { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
        .cta-text { font-size: 15px; color: var(--text-secondary); max-width: 480px; margin: 0 auto 24px; }
        .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--accent-orange); border: none; border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; color: white; text-decoration: none; cursor: pointer; transition: background 0.2s; }
        .cta-btn:hover { background: var(--accent-orange-hover); }
        .new-scan-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; margin-top: 24px; }
        .new-scan-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
        .features-section { padding: 60px 0; background: var(--bg-primary); border-top: 1px solid var(--border-light); }
        .features-title { text-align: center; font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 32px; }
        .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
        .feature-card { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 24px; }
        .feature-icon { width: 40px; height: 40px; background: var(--accent-orange-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--accent-orange); margin-bottom: 16px; }
        .feature-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
        .feature-desc { font-size: 14px; color: var(--text-secondary); }
        .guide-section { padding: 0 0 68px; background: var(--bg-primary); }
        .guide-inner { border-top: 1px solid var(--border-light); padding-top: 48px; }
        .guide-title { font-size: clamp(25px, 3vw, 32px); margin-bottom: 12px; }
        .guide-intro { max-width: 720px; color: var(--text-secondary); margin-bottom: 28px; }
        .guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .guide-card { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 24px; }
        .guide-card h3 { font-size: 17px; margin-bottom: 10px; }
        .guide-card p, .guide-card li { font-size: 14px; color: var(--text-secondary); }
        .guide-card ul { margin: 0; padding-left: 20px; }
        .guide-card li + li { margin-top: 8px; }
        .guide-note { margin-top: 24px; color: var(--text-secondary); font-size: 14px; }
        .guide-note a { color: var(--accent-orange-hover); text-underline-offset: 3px; }
        footer { padding: 24px 0; background: var(--bg-primary); border-top: 1px solid var(--border-light); text-align: center; }
        .footer-text { font-size: 14px; color: var(--text-muted); }
        .footer-text a { color: var(--accent-orange); text-decoration: none; }
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1000; align-items: center; justify-content: center; }
        .modal-overlay.active { display: flex; }
        .modal-content { background: var(--bg-primary); border-radius: var(--radius-lg); padding: 32px; max-width: 500px; width: 90%; max-height: 80vh; overflow-y: auto; }
        .modal-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; }
        .modal-text { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; }
        .modal-text ul { margin: 12px 0; padding-left: 20px; }
        .modal-text li { margin-bottom: 8px; }
        .modal-close { width: 100%; padding: 12px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; }
        @media (max-width: 768px) { .nav-links { display: none; } .hero { padding: 40px 0 32px; } .scan-card { padding: 24px; } .url-prefix { display: none; } .score-gauge { width: 160px; height: 160px; } .score-number { font-size: 44px; } .features-grid, .guide-grid { grid-template-columns: 1fr; } }
    
/* Current WebbLMS brand, shared with webblms.com (October 2026). */
:root{--bg-primary:#fffdf8;--bg-secondary:#f8f5ed;--bg-tertiary:#eae8de;--text-primary:#102f3b;--text-secondary:#53616a;--text-muted:#5d696d;--accent-orange:#ba4d1d;--accent-orange-hover:#973c17;--accent-orange-light:#f4e5d8;--accent-green:#28704e;--accent-green-light:#e9f0e7;--accent-blue:#326477;--accent-blue-light:#e7eef1;--accent-yellow:#886218;--accent-yellow-light:#f6edcf;--accent-red:#ad3930;--accent-red-light:#faebe7;--border-color:#cdd0c6;--border-light:#17373c1c;--radius-sm:5px;--radius-md:7px;--radius-lg:10px;--font-sans:'DM Sans',Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,Consolas,monospace;--shadow-md:0 22px 65px #16373518}
html{scroll-behavior:smooth;scroll-padding-top:110px}body{-webkit-font-smoothing:antialiased;font-size:17px}h1,h2,h3,h4{font-family:Inter,Arial,sans-serif;letter-spacing:-.035em;font-weight:600;line-height:1.12}button,input{font:inherit}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ba4d1d;outline-offset:4px}::selection{background:#e6b081;color:#102f3b}.container{width:min(1280px,calc(100% - 112px));max-width:none;padding:0}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-200%);z-index:200;background:#102f3b;color:white;padding:12px}.skip-link:focus{transform:none}header{background:#faf8f0f5;backdrop-filter:blur(14px);border-color:#13343c0d}.header-content{min-height:86px;padding:0;gap:24px;width:min(1328px,calc(100% - 80px))}.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}.brand svg{height:44px;width:38px}.brand span{font:400 26px Inter,Arial,sans-serif;letter-spacing:-1px}.brand strong{font-weight:700}.nav-links{gap:28px}.nav-links a{font-size:14px;color:var(--text-primary);font-weight:600}.nav-links a:hover{color:var(--accent-orange)}.nav-links .nav-btn{background:#102f3b;color:white;border:0;border-radius:5px;padding:10px 20px}.menu-toggle{display:none}.hero{position:relative;isolation:isolate;overflow:hidden;padding:68px 0 72px;text-align:left;background:#f4efdf}.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/learning-arch.webp') center/cover no-repeat;opacity:.38}.hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#f8f5edf5 0%,#f8f5eddd 38%,#f8f5ed22 100%)}.hero-layout{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:72px}.hero-copy{padding:25px 0 0}.badge,.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:11px;line-height:1.5;font-weight:700}.badge{padding:0;background:none;border-radius:0;margin-bottom:26px;color:#6e4b35}.eyebrow{margin-bottom:16px}h1{font-size:clamp(44px,4.5vw,66px);line-height:1.07;letter-spacing:-.052em;margin-bottom:26px}h1 span{color:#ba4d1d}.hero-subtitle{font-size:20px;line-height:1.6;max-width:460px;margin:0 0 25px;color:#304b54}.hero-points{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;font-weight:500;max-width:390px;margin:0 0 25px}.hero-points span:before{content:'✓';color:#376654;margin-right:6px}.text-link{display:inline-flex;gap:20px;align-items:center;font-size:14px;font-weight:600;text-underline-offset:5px}.editorial-note{display:flex;gap:24px;align-items:center;margin-top:60px}.editorial-note i{width:55px;border-bottom:1px solid #49676d88}.editorial-note span{font:italic 27px/1.2 'Cormorant Garamond',Georgia,serif}.scan-section{max-width:none;margin:0;padding:0;min-width:0}.scan-card{background:#fffdf8f5;padding:32px 34px;text-align:left;border:1px solid #c5c7b7;box-shadow:var(--shadow-md)}.scan-card .eyebrow{color:#6b665b;margin-bottom:9px;font-size:10px}.form-title{font-size:29px;margin-bottom:9px}.form-intro{font-size:14px;color:var(--text-secondary);margin-bottom:24px}.input-label{font-size:13px;font-weight:600}.input-group{margin-bottom:18px}.url-input,.email-input{min-width:0;background:#fffefb;font-size:14px;height:48px}.url-prefix{font-size:13px;height:48px;background:#f2f0e8}.field-hint{font-size:12px;color:var(--text-muted);margin-top:6px}.checkbox-group{margin:16px 0;gap:10px}.checkbox-input{flex-shrink:0;width:16px;height:16px;margin-top:3px}.checkbox-label{font-size:12px;line-height:1.6}.checkbox-label a{text-decoration:underline;text-underline-offset:3px}.scan-btn{min-height:52px;font-size:14px;border:1px solid #b9582a;background:linear-gradient(110deg,#bf511e,#ac451a)}.scan-btn:disabled{opacity:1;background:#e6dfd3;border-color:#dad2c4;color:#655d52}.avg-score-display{border:1px solid #17373c20;background:#f8f5ede6!important;margin-top:16px;margin-bottom:0!important;padding:14px 20px!important}.features-section{padding:78px 0;background:var(--bg-secondary)}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:45px}.section-heading h2{font-size:38px}.section-heading p{font-size:16px;color:var(--text-secondary)}.features-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.feature-card{border:0;border-left:1px solid #8a999a70;border-radius:0;background:transparent;padding:0 22px}.feature-card:first-child{padding-left:0;border:0}.feature-icon{background:transparent;width:30px;height:32px;justify-content:flex-start;color:#ba4d1d;margin-bottom:22px}.feature-icon svg{width:27px;height:27px;stroke-width:1.5}.feature-name{font-size:16px;line-height:1.3;margin-bottom:12px}.feature-desc{font-size:13px;line-height:1.65}.guide-section{background:#123e46;color:#f8f5ed;padding:64px 0}.guide-inner{border:0;padding-top:0}.guide-title{font-size:36px;margin-bottom:20px}.guide-intro{color:#d8e2de;max-width:770px;font-size:17px;line-height:1.7;margin-bottom:32px}.guide-grid{gap:40px}.guide-card{background:transparent;border:0;padding:0;border-radius:0}.guide-card h3{font-size:19px;margin-bottom:14px}.guide-card p,.guide-note{color:#d8e2de;font-size:14px;line-height:1.7}.guide-note{margin-top:32px}.guide-note a{color:#ffba90;text-decoration:none}.guide-note a:hover{color:#fff}.results-section{padding:55px 0 70px}.results-header{text-align:left;margin-bottom:30px}.results-title{font-size:38px}.results-url{overflow-wrap:anywhere;margin-top:12px}.score-card{display:grid;grid-template-columns:200px 1fr;grid-template-rows:1fr 1fr;column-gap:42px;text-align:left;padding:28px 40px;background:#fffdf8}.score-gauge{grid-row:1/3;margin:0}.score-rating{align-self:end;font-size:30px}.score-summary{margin:0;max-width:520px;align-self:start}.categories-grid{gap:12px;grid-template-columns:repeat(5,minmax(0,1fr))}.category-card{padding:20px 16px}.category-header{gap:8px;align-items:start}.category-name{font-size:12px}.category-score{font-size:12px;white-space:nowrap}.findings-title{font-size:20px}.finding-header{list-style:none;padding:22px}.finding-header::-webkit-details-marker{display:none}.finding-card[open] .finding-details{display:block}.finding-card[open] .finding-toggle{transform:rotate(180deg)}.finding-details{padding:0 22px 22px}.finding-title{font-size:15px;overflow-wrap:anywhere}.finding-fix-text,.finding-why-text,.finding-description{overflow-wrap:anywhere;white-space:pre-wrap}.severity-high{color:#a34213}.severity-medium{color:#795713}.cta-card{margin-top:40px;background:#123e46;color:#f8f5ed;border:0;padding:42px}.cta-icon{display:none}.cta-title{font-size:30px}.cta-text{color:#d8e2de;font-size:16px}.new-scan-btn{font-family:var(--font-sans);min-height:44px}footer{background:#f8f5ed;padding:38px 0 24px;text-align:left}.footer-top,.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px}.footer-top p{font-size:14px}.footer-bottom{border-top:1px solid #17373c1c;margin-top:28px;padding-top:20px;font-size:12px;color:var(--text-secondary)}.footer-bottom nav{display:flex;gap:24px}.footer-bottom a{text-decoration:none}.footer-bottom a:hover{text-decoration:underline}dialog{margin:auto;border:1px solid var(--border-color);border-radius:10px;background:var(--bg-primary);max-width:560px;width:calc(100% - 32px);max-height:85dvh;color:var(--text-primary)}dialog::backdrop{background:#061e29b0;backdrop-filter:blur(5px)}.modal-content{width:100%;max-width:none;max-height:none}.modal-close{font:600 14px var(--font-sans);background:#102f3b;color:white;min-height:44px}.preview-banner{background:#e9e1cc;color:#384945;padding:9px 20px;font-size:12px;text-align:center}.preview-banner a{text-underline-offset:3px}
@media(max-width:1100px){.container{width:calc(100% - 64px)}.header-content{width:calc(100% - 48px)}.hero-layout{gap:38px}.scan-card{padding:28px}h1{font-size:51px}.nav-links{gap:20px}.nav-links a{font-size:12px}.features-grid{grid-template-columns:repeat(3,1fr);gap:32px 0}.feature-card:nth-child(4){border:0;padding-left:0}.categories-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.container{width:calc(100% - 40px)}.header-content{min-height:76px}.brand svg{height:38px;width:32px}.brand span{font-size:24px}.menu-toggle{display:flex;width:44px;height:44px;border:1px solid #123e4630;background:transparent;border-radius:5px;flex-direction:column;align-items:center;justify-content:center;gap:6px}.menu-toggle span{width:20px;height:2px;background:#102f3b}.nav-links{display:none;position:absolute;top:75px;left:0;right:0;background:#faf8f0;padding:20px 24px;border-bottom:1px solid var(--border-color);align-items:stretch;gap:0}.nav-links.is-open{display:flex;flex-direction:column}.nav-links a{padding:12px 0;font-size:15px}.nav-links .nav-btn{margin-top:10px;text-align:center}.hero{padding:36px 0 44px}.hero-layout{grid-template-columns:1fr;gap:30px}.hero-copy{padding-top:0}.badge{margin-bottom:18px}h1{font-size:clamp(42px,7vw,58px)}h1 br:first-child{display:none}.hero-subtitle{max-width:550px;font-size:18px;margin-bottom:20px}.hero-points{max-width:none;margin-bottom:16px}.editorial-note{display:none}.scan-card{padding:26px}.scan-section{width:100%}.section-heading{display:block}.section-heading h2{font-size:32px;margin-bottom:18px}.features-section{padding:48px 0}.features-grid{grid-template-columns:1fr 1fr;gap:28px 0}.feature-card:nth-child(4){border-left:1px solid #8a999a70;padding-left:22px}.feature-card:nth-child(odd){border-left:0;padding-left:0}.guide-section{padding:44px 0}.guide-grid{grid-template-columns:1fr;gap:25px}.guide-title{font-size:32px}.score-card{padding:24px;grid-template-columns:150px 1fr;gap:0 24px}.score-gauge{width:150px;height:150px}.score-gauge svg{width:100%;height:100%}.score-number{font-size:42px}.score-rating{font-size:24px}.score-summary{font-size:14px}.results-title{font-size:32px}.categories-grid{grid-template-columns:1fr 1fr}.footer-top,.footer-bottom{align-items:flex-start;flex-direction:column;gap:18px}.cta-card{padding:30px 24px}.cta-title{font-size:26px}.url-prefix{display:flex}}
@media(max-width:420px){.container{width:calc(100% - 32px)}.scan-card{padding:22px 18px}.form-title{font-size:26px}.url-prefix{padding:0 10px;font-size:12px}.url-input{padding:0 10px;font-size:13px}.score-card{display:block;text-align:center}.score-gauge{margin:0 auto 20px}.score-summary{margin:0 auto}.finding-header{padding:16px;gap:8px}.severity-badge{padding:4px 6px;font-size:9px}.finding-title{font-size:14px}.category-card{padding:15px 12px}.footer-bottom nav{gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Compact copy: keep the result contact action separate from its heading. */
.cta-title{margin-bottom:24px}

.text-link{text-decoration:none;gap:10px}.text-link:hover{color:var(--accent-orange)}
@media(min-width:801px){.hero-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}}

.php2shell-card{background:var(--bg-primary);border:1px solid var(--border-color);border-left:4px solid var(--accent-blue);border-radius:7px;padding:24px;margin-bottom:24px}.php2shell-heading{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px}.php2shell-heading h3{font-size:20px}.php2shell-status{font-size:13px;font-weight:600;color:var(--accent-blue)}.php2shell-card>p:not(.field-hint){font-size:14px;color:var(--text-secondary)}.php2shell-card.needs-review{border-left-color:#a34213}.php2shell-card.needs-review .php2shell-status{color:#a34213}.php2shell-card a{text-underline-offset:3px}@media(max-width:500px){.php2shell-heading{align-items:flex-start;flex-direction:column;gap:8px}}

/* One focus treatment per field, including the URL prefix wrapper. */
.url-input-wrapper:focus-within,.email-input:focus{border-color:#52777d;box-shadow:0 0 0 2px #123e4614}
.url-input:focus-visible,.email-input:focus-visible{outline:none}