/* =========================================================
   MODUQR — VISUAL SYSTEM 0.8.4
   Direction:
   - Light application workspace
   - Dark dedicated 3D studio
   - Orange primary action color
   - Neutral gray hierarchy
   - Cleaner typography and fewer nested visual boxes
   ========================================================= */

:root{
    --bg:#F4F5F6;
    --bg-soft:#FAFAF9;

    --surface:#FFFFFF;
    --surface-2:#F7F7F5;
    --surface-3:#F0F1F2;

    --border:#D9DDE2;
    --border-strong:#C7CDD4;

    --text:#17191D;
    --text-soft:#5F6670;
    --text-muted:#818892;

    --primary:#C84A11;
    --primary-hover:#A93D0D;
    --primary-light:#FFF0E8;
    --primary-soft:#FCE2D4;

    --success:#168A5B;
    --success-soft:#E9F7F0;

    --warning:#A46908;
    --warning-soft:#FFF5DE;

    --danger:#C53642;
    --danger-soft:#FDECEE;

    --studio:#11161C;
    --studio-2:#0B1016;
    --studio-border:#2A323B;
    --studio-text:#F7F8FA;
    --studio-muted:#A6AFB9;

    --container:1200px;
    --radius:16px;

    --shadow-soft:
        0 1px 2px rgba(18,24,31,.04),
        0 12px 34px rgba(18,24,31,.07);

    --shadow-card:
        0 1px 2px rgba(18,24,31,.05),
        0 8px 24px rgba(18,24,31,.06);
}

/* ---------------------------------------------------------
   TYPOGRAPHY / BASE
   --------------------------------------------------------- */

html{
    background:var(--bg);
}

body{
    background:
        linear-gradient(
            180deg,
            #FBFBFA 0,
            #F4F5F6 520px,
            #F4F5F6 100%
        )!important;

    color:var(--text)!important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif!important;

    font-size:16px;
    line-height:1.55!important;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

button,
input,
textarea,
select{
    font-family:inherit!important;
}

p,
small{
    letter-spacing:0!important;
}

h1,
h2,
h3,
strong{
    letter-spacing:-.012em;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.site-header{
    background:rgba(255,255,255,.94)!important;
    border-bottom:1px solid var(--border)!important;
    box-shadow:0 1px 0 rgba(17,24,39,.02)!important;
}

.header-inner{
    min-height:72px!important;
}

.brand{
    color:var(--text)!important;
    font-weight:780!important;
}

.brand-name span{
    color:#69717B!important;
}

.brand-mark span{
    background:var(--primary)!important;
}


.main-nav{
    color:#4D545D!important;
    font-size:13px!important;
    font-weight:600!important;
}

.main-nav a:hover{
    color:var(--primary)!important;
}

.language-switch{
    border-color:var(--border)!important;
    background:#FFFFFF!important;
    color:var(--text)!important;
    box-shadow:0 1px 1px rgba(17,24,39,.03)!important;
}

.language-globe{
    color:var(--primary)!important;
}

.language-options{
    border-color:#ECEEF0!important;
    background:#F4F5F6!important;
}

.language-option{
    color:#6D747D!important;
}

.language-option:hover{
    color:var(--text)!important;
}

.language-option.is-active{
    background:var(--primary)!important;
    color:white!important;
    box-shadow:none!important;
}

.header-cta,
.button-primary{
    background:var(--primary)!important;
    color:white!important;
    box-shadow:0 8px 22px rgba(200,74,17,.18)!important;
}

.header-cta:hover,
.button-primary:hover{
    background:var(--primary-hover)!important;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero{
    padding-top:82px!important;
    padding-bottom:76px!important;
}

.eyebrow{
    margin-bottom:14px!important;
    color:var(--primary)!important;
    font-size:11px!important;
    font-weight:850!important;
    letter-spacing:.12em!important;
}

.hero h1{
    color:var(--text)!important;
    font-size:clamp(48px,5.6vw,76px)!important;
    line-height:1.01!important;
    letter-spacing:-.052em!important;
}

.hero h1 span{
    background:none!important;
    color:var(--primary)!important;
    -webkit-text-fill-color:currentColor!important;
}

.hero-description{
    color:#626A74!important;
    font-size:17px!important;
    line-height:1.7!important;
}

.hero-quick-create label{
    color:#6D747C!important;
}

.quick-input{
    border-color:var(--border)!important;
    background:#FFFFFF!important;
    box-shadow:var(--shadow-card)!important;
}

.quick-input:hover{
    border-color:#D3A089!important;
}

.quick-input:focus-within{
    border-color:var(--primary)!important;
    background:#FFFFFF!important;
    box-shadow:0 0 0 3px rgba(200,74,17,.10)!important;
}

.quick-input input{
    color:var(--text)!important;
}

.quick-input input::placeholder{
    color:#9AA0A8!important;
}

.quick-input span{
    background:var(--primary)!important;
    box-shadow:none!important;
}

.button-secondary{
    border-color:var(--border)!important;
    background:#FFFFFF!important;
    color:#2B3036!important;
}

.button-secondary:hover{
    border-color:#C8CDD2!important;
    background:#F8F8F7!important;
}

.hero-trust{
    color:#69717A!important;
}

.visual-glow{
    background:rgba(200,74,17,.13)!important;
    filter:blur(110px)!important;
}

.qr-placeholder{
    border-color:#E2E4E7!important;
    background:#FFFFFF!important;
    box-shadow:
        0 28px 70px rgba(20,25,30,.16),
        0 2px 8px rgba(20,25,30,.05)!important;
}

.qr-preview{
    background:#FFFFFF!important;
}

.qr-base{
    background:var(--primary)!important;
    box-shadow:0 18px 34px rgba(200,74,17,.22)!important;
}

/* ---------------------------------------------------------
   GENERATOR — SHELL
   --------------------------------------------------------- */

.generator-preview{
    padding-top:22px!important;
    padding-bottom:70px!important;
}

.generator-shell{
    border-color:var(--border)!important;
    border-radius:20px!important;
    background:#FFFFFF!important;
    box-shadow:
        0 1px 2px rgba(18,24,31,.04),
        0 24px 70px rgba(18,24,31,.08)!important;
}

.builder-workspace{
    background:#FFFFFF!important;
}

.builder-controls{
    border-right-color:var(--border)!important;
    background:#FBFBFA!important;
    color:var(--text)!important;
}

.builder-kicker{
    color:var(--primary)!important;
    font-size:.70rem!important;
    font-weight:850!important;
    letter-spacing:.10em!important;
}

.qr-content-title,
.builder-controls-header>strong,
.builder-controls-header strong,
.customization-engine h3,
.template-controls-header>strong{
    color:var(--text)!important;
}

.builder-controls-header p,
.qr-type-hint,
.builder-controls small,
.template-card small{
    color:var(--text-soft)!important;
}

/* ---------------------------------------------------------
   BUILDER NAVIGATION
   --------------------------------------------------------- */

.builder-flow-step{
    border-color:#E0E3E6!important;
    background:#FFFFFF!important;
    color:#32373D!important;
    box-shadow:none!important;
}

.builder-flow-step:hover{
    border-color:#D2B09F!important;
    background:#FFFDFC!important;
    color:var(--text)!important;
}

.builder-flow-step::after{
    color:#A3A8AE!important;
}

.builder-flow-step>strong{
    color:#23272C!important;
    font-weight:760!important;
}

.builder-flow-step>small{
    color:#747B84!important;
}

.builder-flow-step>span:not(.ui-icon){
    background:#F0F1F2!important;
    color:#5B626B!important;
}

.step-icon,
.builder-flow-step[data-builder-panel="design"] .step-icon,
.builder-flow-step[data-builder-panel="object"] .step-icon,
.builder-flow-step[data-builder-panel="print"] .step-icon{
    background:#F2F3F4!important;
    color:#5D646C!important;
    box-shadow:inset 0 0 0 1px #E4E6E8!important;
}

.builder-flow-step.is-active{
    border-color:#E2A283!important;
    background:var(--primary-light)!important;
    color:var(--text)!important;
    box-shadow:0 0 0 1px rgba(200,74,17,.04)!important;
}

.builder-flow-step.is-active::after{
    color:var(--primary)!important;
}

.builder-flow-step.is-active>span:not(.ui-icon),
.builder-flow-step.is-active .step-icon{
    background:var(--primary)!important;
    color:white!important;
    box-shadow:none!important;
}

.builder-flow-step.is-active strong{
    color:#8D330D!important;
}

/* ---------------------------------------------------------
   INPUTS / CHOICES
   --------------------------------------------------------- */

.qr-type{
    border-color:#DDE1E5!important;
    background:#FFFFFF!important;
    color:#4C535B!important;
}

.qr-type:hover{
    border-color:#D5A58E!important;
    background:#FFFDFC!important;
    color:var(--text)!important;
}

.qr-type.is-active{
    border-color:var(--primary)!important;
    background:var(--primary-light)!important;
    color:#92350D!important;
    box-shadow:0 0 0 1px rgba(200,74,17,.05)!important;
}

.qr-type-icon{
    color:#7A828B!important;
}

.qr-type.is-active .qr-type-icon{
    color:var(--primary)!important;
}

.qr-field label,
.color-control,
.keychain-advanced label,
.stand-advanced label,
.wifi-sign-advanced label,
.review-sign-advanced label{
    color:#515860!important;
    font-weight:700!important;
}

.qr-field input,
.qr-field textarea,
.qr-field select,
.advanced-control select,
.scansafe-profile-grid select{
    border-color:#D9DDE1!important;
    background:#FFFFFF!important;
    color:var(--text)!important;
    box-shadow:0 1px 1px rgba(17,24,39,.02)!important;
}

.qr-field input::placeholder,
.qr-field textarea::placeholder{
    color:#9BA1A8!important;
}

.qr-field input:focus,
.qr-field textarea:focus,
.qr-field select:focus,
.advanced-control select:focus,
.scansafe-profile-grid select:focus{
    border-color:var(--primary)!important;
    box-shadow:0 0 0 3px rgba(200,74,17,.09)!important;
}

.color-input-wrap{
    border-color:#D9DDE1!important;
    background:#FFFFFF!important;
}

.color-input-wrap code{
    color:#41474E!important;
    font-size:.62rem!important;
}

.mode-switch{
    border-color:#DADDE1!important;
    background:#F0F1F2!important;
}

.mode-switch-button{
    color:#6D747C!important;
}

.mode-switch-button.is-active{
    background:#FFFFFF!important;
    color:#8F340E!important;
    box-shadow:0 1px 3px rgba(18,24,31,.08)!important;
}

.advanced-control{
    border-color:#E0E3E6!important;
    background:#F8F8F7!important;
}

.advanced-control strong{
    color:#30353B!important;
}

.advanced-control small{
    color:#707780!important;
}

.customization-reset{
    border-color:#D7DBDF!important;
    background:#FFFFFF!important;
    color:#5B626B!important;
}

.customization-reset:hover{
    border-color:#CE9D86!important;
    color:#95370E!important;
}

.editor-mode-guidance{
    border-color:#E4D5CE!important;
    background:#FFF8F4!important;
}

.editor-mode-guidance strong{
    color:#383D43!important;
}

.editor-mode-guidance p{
    color:#6A7179!important;
}

.editor-mode-guidance-icon{
    background:#F4E3DB!important;
    color:var(--primary)!important;
}

.editor-mode-guidance.is-advanced{
    border-color:#E4D5CE!important;
    background:#FFF6F1!important;
}

.editor-mode-guidance.is-advanced .editor-mode-guidance-icon{
    background:#F4E3DB!important;
    color:var(--primary)!important;
}

.builder-next-button{
    background:var(--primary)!important;
    color:white!important;
    box-shadow:none!important;
}

.builder-next-button:hover{
    background:var(--primary-hover)!important;
    filter:none!important;
}

/* ---------------------------------------------------------
   TEMPLATES / OBJECT CONTROLS
   --------------------------------------------------------- */

.template-controls-header{
    border-bottom-color:#E5E7E9!important;
}

.template-card{
    border-color:#DDE1E5!important;
    background:#FFFFFF!important;
    color:#4C535B!important;
}

.template-card strong{
    color:#30353A!important;
}

.template-card small{
    color:#747B83!important;
}

.template-card:hover{
    border-color:#D6A68F!important;
    background:#FFFDFC!important;
}

.template-card.is-active{
    border-color:var(--primary)!important;
    background:var(--primary-light)!important;
}

.template-card.is-active strong{
    color:#92350D!important;
}

.keychain-options,
.stand-options,
.wifi-sign-options,
.review-sign-options{
    border-color:#E2E5E8!important;
    background:#F9F9F8!important;
}

.keychain-option-heading strong,
.stand-option-heading strong,
.wifi-sign-heading strong,
.review-sign-heading strong{
    color:#2B3036!important;
}

.keychain-option-heading small,
.stand-option-heading small,
.wifi-sign-heading small,
.review-sign-heading small{
    color:#6B727A!important;
}

.keychain-position,
.stand-preset{
    border-color:#D9DDE1!important;
    background:#FFFFFF!important;
    color:#555D65!important;
}

.keychain-position.is-active,
.stand-preset.is-active{
    border-color:var(--primary)!important;
    background:var(--primary-light)!important;
    color:#91350E!important;
    box-shadow:none!important;
}

.stand-preset strong{
    color:#34393F!important;
}

.stand-preset.is-active strong{
    color:#91350E!important;
}

.keychain-position-guide,
.stand-guide,
.wifi-sign-guide,
.review-sign-guide{
    border-color:#E2D7D1!important;
    background:#FFF9F5!important;
}

.keychain-guide-head strong,
.stand-guide-head strong,
.wifi-sign-guide strong,
.review-sign-guide strong{
    color:#34393F!important;
}

.keychain-position-guide p,
.stand-guide p,
.wifi-sign-guide p,
.review-sign-guide p{
    color:#676E76!important;
}

.keychain-recommended,
.stand-recommended{
    border-color:#E2A283!important;
    background:#FFF0E8!important;
    color:#A13A0C!important;
}

.wifi-use-content,
.review-use-url{
    border-color:var(--primary)!important;
    background:#FFFFFF!important;
    color:#98370E!important;
}

.wifi-use-content:hover,
.review-use-url:hover{
    background:var(--primary)!important;
    color:white!important;
}

.keychain-advanced,
.stand-advanced,
.wifi-sign-advanced,
.review-sign-advanced{
    border-top-color:#E3E6E9!important;
}

.keychain-advanced label strong,
.stand-advanced label strong,
.wifi-sign-advanced label strong,
.review-sign-advanced label strong{
    color:var(--primary)!important;
}

.keychain-advanced input,
.stand-advanced input,
.wifi-sign-advanced input,
.review-sign-advanced input{
    accent-color:var(--primary)!important;
}

/* ---------------------------------------------------------
   CONTROL PANEL SCROLL / CUE
   --------------------------------------------------------- */

.builder-panel{
    scrollbar-color:#CB7A52 #ECEEF0!important;
}

.builder-panel::-webkit-scrollbar-track{
    background:#ECEEF0!important;
}

.builder-panel::-webkit-scrollbar-thumb{
    border-color:#ECEEF0!important;
    background:#CB7A52!important;
}

.builder-panel::-webkit-scrollbar-thumb:hover{
    background:var(--primary)!important;
}

.builder-scroll-cue{
    border-color:#E3B198!important;
    background:linear-gradient(180deg,rgba(255,255,255,.84),#FFF8F4)!important;
    color:#97401A!important;
    box-shadow:0 -14px 24px rgba(244,245,246,.90)!important;
}

.builder-scroll-cue strong{
    color:var(--primary)!important;
}

/* ---------------------------------------------------------
   DARK 3D STUDIO
   --------------------------------------------------------- */

.builder-preview{
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(200,74,17,.08),
            transparent 34%
        ),
        var(--studio)!important;

    color:var(--studio-text)!important;
}

.builder-preview .builder-kicker{
    color:#FF9E72!important;
}

.builder-preview-heading strong{
    color:#FFFFFF!important;
}

.preview-help{
    color:#A4AFB9!important;
}

.view-mode-switch{
    border-color:#39424C!important;
    background:#0A0F14!important;
}

.view-mode-button{
    border-right-color:#2F3740!important;
    color:#B3BDC6!important;
}

.view-mode-button:hover{
    background:#171E25!important;
    color:white!important;
}

.view-mode-button.is-active{
    background:var(--primary)!important;
    color:white!important;
    box-shadow:none!important;
}

.viewer-frame{
    border-color:#343E48!important;
    background:
        radial-gradient(
            circle at 50% 50%,
            #1B242D 0,
            #111820 48%,
            #0A0F14 100%
        )!important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 14px 38px rgba(0,0,0,.18)!important;
}

.qr-3d-viewer{
    border-color:transparent!important;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(200,74,17,.07),
            transparent 40%
        ),
        #0B1117!important;
}

.viewer-badge{
    border-color:#303A43!important;
    background:rgba(8,12,16,.76)!important;
    color:#89949F!important;
}

.viewer-busy{
    background:rgba(12,17,22,.72)!important;
}

.viewer-busy-spinner{
    border-color:rgba(255,255,255,.20)!important;
    border-top-color:#F98551!important;
}

/* ---------------------------------------------------------
   MOBILE CONTROLS/PREVIEW SWITCH
   --------------------------------------------------------- */

.mobile-builder-switch{
    border-bottom-color:var(--border)!important;
    background:rgba(255,255,255,.97)!important;
}

.mobile-builder-switch-button{
    border-color:#D9DDE1!important;
    background:#F4F5F6!important;
    color:#656C75!important;
}

.mobile-builder-switch-button.is-active{
    border-color:var(--primary)!important;
    background:var(--primary-light)!important;
    color:#90350E!important;
    box-shadow:none!important;
}

/* ---------------------------------------------------------
   QUICK STATUS
   --------------------------------------------------------- */

.builder-quick-status{
    background:#FFFFFF!important;
}

.quick-status-item,
.quick-status-item:first-child,
.quick-status-item:last-child{
    border-color:#E0E3E6!important;
    background:#FFFFFF!important;
}

.quick-status-item:hover{
    background:#FAFAF9!important;
}

.quick-status-item span{
    color:#737A82!important;
}

.quick-status-item strong{
    color:#24292E!important;
}

.quick-status-scansafe{
    background:#F6FBF8!important;
}

.quick-status-scansafe span{
    color:#34765B!important;
}

.quick-status-scansafe strong{
    color:var(--success)!important;
}

/* ---------------------------------------------------------
   EXPORT ACTIONS
   --------------------------------------------------------- */

.builder-actions{
    border-top-color:#E1E4E7!important;
    background:#FAFAF9!important;
}

.builder-actions-copy strong{
    color:#252A30!important;
}

.builder-actions-copy p{
    color:#6D747C!important;
}

.builder-button{
    border-color:#D9DDE1!important;
    background:#FFFFFF!important;
    color:#3A4047!important;
}

.builder-button:hover:not(:disabled){
    border-color:#C9A08C!important;
    background:#FFFDFC!important;
    color:#87320F!important;
}

.builder-button-primary{
    border-color:var(--primary)!important;
    background:var(--primary)!important;
    color:white!important;
    box-shadow:0 8px 20px rgba(200,74,17,.16)!important;
}

.builder-button-primary:hover:not(:disabled){
    background:var(--primary-hover)!important;
    color:white!important;
}

.builder-button:disabled{
    background:#F0F1F2!important;
    color:#A0A6AD!important;
}

/* ---------------------------------------------------------
   SCANSAFE
   --------------------------------------------------------- */

.scansafe-panel{
    border-top-color:#E1E4E7!important;
    background:#FFFFFF!important;
    color:var(--text)!important;
}

.scansafe-title{
    color:#252A30!important;
}

.scansafe-profile{
    border-color:#E2D5CF!important;
    background:#FFF7F2!important;
    color:#98370F!important;
}

.scansafe-score-row strong{
    color:#1F2429!important;
}

.scansafe-score-row span,
.scansafe-status{
    color:#4B535B!important;
}

.scansafe-panel p,
.scansafe-copy,
.scansafe-description{
    color:#687079!important;
}

.scansafe-print-profile{
    border-color:#E1E4E7!important;
    background:#F8F8F7!important;
}

.scansafe-print-profile-head strong{
    color:#30353B!important;
}

.scansafe-print-profile-head>span,
#scansafe-profile-target{
    color:#96360F!important;
}

.scansafe-profile-grid label>span{
    color:#687079!important;
}

.scansafe-counts>span{
    border-color:#E1E4E7!important;
    background:#FFFFFF!important;
}

.scansafe-counts small{
    color:#687079!important;
}

.scansafe-counts .is-pass strong{
    color:var(--success)!important;
}

.scansafe-counts .is-warn strong{
    color:var(--warning)!important;
}

.scansafe-counts .is-risk strong{
    color:var(--danger)!important;
}

.scansafe-autofix{
    border-color:var(--primary)!important;
    background:var(--primary)!important;
    color:white!important;
}

.scansafe-autofix:hover:not(:disabled){
    border-color:var(--primary-hover)!important;
    background:var(--primary-hover)!important;
    color:white!important;
}

.scansafe-autofix.is-clean,
.scansafe-autofix:disabled{
    border-color:#CDE7DB!important;
    background:var(--success-soft)!important;
    color:#287253!important;
}

.scansafe-live-metrics>div,
.scansafe-integrity-metric,
.scansafe-geometry-metric{
    border-color:#E1E4E7!important;
    background:#FAFAF9!important;
}

.scansafe-live-metrics span{
    color:#737A82!important;
}

.scansafe-live-metrics strong{
    color:#252A30!important;
}

#scansafe-integrity-metric.is-pass,
#scansafe-geometry-metric.is-pass{
    color:var(--success)!important;
}

#scansafe-integrity-metric.is-risk,
#scansafe-geometry-metric.is-risk{
    color:var(--danger)!important;
}

#scansafe-geometry-metric.is-warn{
    color:var(--warning)!important;
}

#scansafe-integrity-metric.is-info,
#scansafe-geometry-metric.is-info{
    color:#4D6A7E!important;
}

.scansafe-check{
    border-color:#E3E6E9!important;
    background:#FFFFFF!important;
}

.scansafe-check strong{
    color:#30353B!important;
}

.scansafe-check small{
    color:#687079!important;
}

.scansafe-check.is-info strong{
    color:#445E70!important;
}

.scansafe-recommendations{
    border-color:#F0D6A3!important;
    background:var(--warning-soft)!important;
}

.scansafe-recommendations>strong{
    color:#875805!important;
}

.scansafe-recommendations li{
    color:#61543B!important;
}

/* ---------------------------------------------------------
   PRINT INTELLIGENCE
   --------------------------------------------------------- */

.print-intelligence{
    border-top-color:#E1E4E7!important;
    background:#FAFAF9!important;
    color:var(--text)!important;
}

.print-intelligence-title strong{
    color:#252A30!important;
}

.print-status{
    border-color:#CDE7DB!important;
    background:var(--success-soft)!important;
    color:#287253!important;
}

.print-forecast{
    border-color:#E0E3E6!important;
    background:#FFFFFF!important;
}

.print-forecast-head>div>strong{
    color:#252A30!important;
}

.print-forecast-status{
    border-color:#DDE1E5!important;
    background:#F4F5F6!important;
    color:#606870!important;
}

.print-forecast-status.is-ready{
    border-color:#CDE7DB!important;
    background:var(--success-soft)!important;
    color:#287253!important;
}

.print-forecast-status.is-review{
    border-color:#F0D6A3!important;
    background:var(--warning-soft)!important;
    color:#875805!important;
}

.print-forecast-status.is-attention{
    border-color:#F1C7CC!important;
    background:var(--danger-soft)!important;
    color:#A92D38!important;
}

.print-forecast-grid>div{
    border-color:#E3E6E9!important;
    background:#F8F8F7!important;
}

.print-forecast-grid span{
    color:#737A82!important;
}

.print-forecast-grid strong{
    color:#252A30!important;
}

.print-forecast-footer{
    border-top-color:#E7E9EB!important;
}

.print-forecast-footer>span small,
.print-forecast-footer p{
    color:#747B83!important;
}

.print-forecast-footer>span strong{
    color:#92350D!important;
}

.model-metrics{
    border-color:#DFE3E6!important;
    background:#FFFFFF!important;
}

.model-metric{
    border-color:#E1E4E7!important;
    background:#FFFFFF!important;
}

.model-metric-highlight{
    background:#FFF7F2!important;
}

.metric-label{
    color:#737A82!important;
}

.metric-value{
    color:#252A30!important;
}

.model-metric-highlight .metric-value{
    color:#96360F!important;
}

/* ---------------------------------------------------------
   HELP / FEEDBACK
   --------------------------------------------------------- */

.inline-help-button{
    border-color:#D9C6BC!important;
    background:#FFF8F4!important;
    color:#9B3A10!important;
}

.inline-help-button:hover{
    border-color:#C88463!important;
    background:#FFF0E8!important;
    color:#7E2E0C!important;
}

.ux-help-popover{
    border-color:#DED7D3!important;
    background:#FFFFFF!important;
    color:var(--text)!important;
    box-shadow:0 18px 50px rgba(20,24,29,.18)!important;
}

.ux-help-head strong{
    color:#24292E!important;
}

.ux-help-close{
    border-color:#E1E4E7!important;
    background:#F5F6F7!important;
    color:#656D75!important;
}

.ux-help-close:hover{
    border-color:#C9A08C!important;
    color:#8C330E!important;
}

.ux-help-body{
    color:#666E77!important;
}

.export-message{
    border-color:#CDE7DB!important;
    background:#F1FAF5!important;
    color:#276B50!important;
    box-shadow:var(--shadow-card)!important;
}

.export-message.is-error{
    border-color:#F1C7CC!important;
    background:#FDF2F3!important;
    color:#A92D38!important;
}

.export-message-icon{
    background:#DFF3E9!important;
    color:#257153!important;
}

.export-message.is-error .export-message-icon{
    background:#F9DDE0!important;
    color:#B32E3B!important;
}

.qr-content-error{
    color:#B52F3B!important;
}

.qr-fields [aria-invalid="true"]{
    border-color:#D44A55!important;
    box-shadow:0 0 0 3px rgba(197,54,66,.08)!important;
}

/* ---------------------------------------------------------
   RANGE INPUTS
   --------------------------------------------------------- */

.builder-control input[type="range"]{
    background:#DDE1E5!important;
}

.builder-control input[type="range"]::-webkit-slider-thumb{
    border-color:#FFFFFF!important;
    background:var(--primary)!important;
    box-shadow:
        0 0 0 1px #B8400D,
        0 4px 10px rgba(200,74,17,.16)!important;
}

.builder-control input[type="range"]::-moz-range-thumb{
    border-color:#FFFFFF!important;
    background:var(--primary)!important;
    box-shadow:
        0 0 0 1px #B8400D,
        0 4px 10px rgba(200,74,17,.16)!important;
}

.control-heading label{
    color:#41484F!important;
}

.control-heading output{
    color:#96360F!important;
}

.control-range{
    color:#858C94!important;
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer{
    border-top-color:var(--border)!important;
    background:#FFFFFF!important;
    color:#69717A!important;
}

.footer-links a:hover{
    color:var(--primary)!important;
}

/* ---------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------- */

.builder-flow-step:focus-visible,
.qr-type:focus-visible,
.template-card:focus-visible,
.keychain-position:focus-visible,
.stand-preset:focus-visible,
.mode-switch-button:focus-visible,
.view-mode-button:focus-visible,
.builder-button:focus-visible,
.builder-next-button:focus-visible,
.quick-status-item:focus-visible,
.scansafe-autofix:focus-visible,
.mobile-preview-jump:focus-visible,
.mobile-builder-switch-button:focus-visible,
.qr-field input:focus-visible,
.qr-field textarea:focus-visible,
.qr-field select:focus-visible,
.scansafe-profile-grid select:focus-visible{
    outline:3px solid rgba(200,74,17,.30)!important;
    outline-offset:2px!important;
}

#qr-3d-viewer:focus-visible{
    outline:3px solid rgba(249,133,81,.72)!important;
}

/* ---------------------------------------------------------
   TABLET / MOBILE
   --------------------------------------------------------- */

@media(max-width:899px){
    body{
        background:#F4F5F6!important;
    }

    .builder-controls{
        border-right:0!important;
        border-bottom-color:var(--border)!important;
        background:#FBFBFA!important;
    }

    .builder-preview{
        border-top:0!important;
    }

    .builder-flow-nav{
        background:transparent!important;
    }

    .builder-flow-step{
        background:#FFFFFF!important;
    }

    .builder-flow-step.is-active{
        background:var(--primary-light)!important;
    }

    .builder-quick-status{
        background:#FFFFFF!important;
    }

    .builder-actions{
        background:#FAFAF9!important;
    }

    .scansafe-panel{
        background:#FFFFFF!important;
    }

    .print-intelligence{
        background:#FAFAF9!important;
    }
}

@media(max-width:600px){
    .hero{
        padding-top:48px!important;
        padding-bottom:48px!important;
    }

    .hero h1{
        font-size:44px!important;
    }

    .hero-description{
        font-size:16px!important;
    }

    .qr-placeholder{
        border-width:8px!important;
    }
}

/* ---------------------------------------------------------
   MAKE SMALL TEXT EASIER TO READ
   --------------------------------------------------------- */

.builder-controls,
.scansafe-panel,
.print-intelligence,
.builder-actions{
    font-weight:450;
}

.qr-type-hint,
.builder-controls small,
.template-card small,
.keychain-option-heading small,
.stand-option-heading small,
.wifi-sign-heading small,
.review-sign-heading small,
.builder-actions-copy p,
.scansafe-panel p,
.scansafe-check small,
.print-forecast-footer p,
.metric-label{
    color:#697079!important;
}

.builder-controls small,
.template-card small,
.scansafe-check small,
.builder-actions-copy p,
.print-forecast-footer p{
    font-size:max(.68rem,11px)!important;
}

.qr-field label,
.color-control,
.advanced-control strong,
.keychain-advanced label,
.stand-advanced label,
.wifi-sign-advanced label,
.review-sign-advanced label{
    font-size:max(.70rem,11.2px)!important;
}

.qr-field input,
.qr-field textarea,
.qr-field select,
.advanced-control select,
.scansafe-profile-grid select{
    font-size:max(.76rem,12.2px)!important;
}

/* ---------------------------------------------------------
   PRINT
   --------------------------------------------------------- */

@media print{
    body{
        background:white!important;
    }

    .site-header,
    .hero,
    .mobile-builder-switch{
        display:none!important;
    }

    .generator-shell{
        box-shadow:none!important;
    }
}


/* =========================================================
   BUILD 0.8.5 — READABILITY / CONTRAST PASS
   Fixes the remaining low-contrast text visible in 0.8.4,
   especially QR Style / Raised / Recessed.
   ========================================================= */

/* ---------------------------------------------------------
   PRINT: QR STYLE CARDS
   --------------------------------------------------------- */

.mode-selector{
    gap:10px!important;
}

.mode-option-content{
    min-height:72px!important;
    padding:11px 12px!important;

    border:1px solid #D5DADF!important;
    border-radius:11px!important;

    background:#FFFFFF!important;

    box-shadow:
        0 1px 2px rgba(17,24,39,.025)!important;
}

.mode-option:hover .mode-option-content{
    border-color:#D5A48C!important;
    background:#FFFDFC!important;
}

.mode-option input:checked + .mode-option-content{
    border-color:var(--primary)!important;

    background:
        linear-gradient(
            135deg,
            #FFF2EB,
            #FFF9F5
        )!important;

    box-shadow:
        0 0 0 2px rgba(200,74,17,.08),
        0 5px 16px rgba(24,28,33,.04)!important;
}

.mode-icon{
    width:30px!important;
    height:30px!important;

    border:1px solid #E1E4E7!important;
    border-radius:8px!important;

    background:#F3F4F5!important;
    color:#454D55!important;

    font-size:.84rem!important;
}

.mode-option input:checked + .mode-option-content .mode-icon{
    border-color:#E4A182!important;
    background:#FDE6DA!important;
    color:#A63C0D!important;
}

.mode-option-content strong{
    display:block!important;

    color:#23282E!important;

    font-size:.78rem!important;
    font-weight:780!important;
    line-height:1.25!important;
}

.mode-option-content small{
    display:block!important;

    margin-top:4px!important;

    color:#626A73!important;

    font-size:.68rem!important;
    font-weight:500!important;
    line-height:1.35!important;
}

.mode-option input:checked + .mode-option-content strong{
    color:#8D330D!important;
}

.mode-option input:checked + .mode-option-content small{
    color:#5E514B!important;
}

.mode-option input:focus-visible + .mode-option-content{
    outline:3px solid rgba(200,74,17,.25)!important;
    outline-offset:2px!important;
}

/* ---------------------------------------------------------
   PRINT PANEL GENERAL READABILITY
   --------------------------------------------------------- */

.builder-control{
    padding:19px 0!important;
    border-bottom-color:#E4E7EA!important;
}

.control-heading{
    margin-bottom:12px!important;
}

.control-heading label,
#relief-label{
    color:#30363C!important;

    font-size:.76rem!important;
    font-weight:760!important;
    line-height:1.35!important;
}

.control-heading output{
    color:#9A370F!important;

    font-size:.75rem!important;
    font-weight:850!important;
}

.control-range{
    margin-top:8px!important;

    color:#69717A!important;

    font-size:.66rem!important;
    font-weight:600!important;
}

.builder-control-note{
    border-color:#E1D5CE!important;
    background:#FFF8F4!important;
}

.note-icon{
    border-color:#E3A487!important;
    background:#FCE7DC!important;
    color:#9C380F!important;
}

.builder-control-note p{
    color:#5E666E!important;

    font-size:.70rem!important;
    line-height:1.55!important;
}

/* ---------------------------------------------------------
   LEFT PANEL SUPPORTING TEXT
   --------------------------------------------------------- */

.builder-controls-header p,
.qr-type-hint,
.builder-controls small,
.template-card small{
    color:#5F6770!important;
}

.builder-controls-header p{
    font-size:.72rem!important;
    line-height:1.5!important;
}

.builder-kicker{
    font-size:.69rem!important;
    line-height:1.2!important;
}

.builder-flow-step small{
    color:#626A72!important;
    font-size:.69rem!important;
}

.qr-type-hint{
    font-size:.70rem!important;
    line-height:1.5!important;
}

.template-card small{
    font-size:.68rem!important;
    line-height:1.35!important;
}

.builder-scroll-cue{
    min-height:38px!important;

    border-color:#E3A98B!important;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            #FFF4ED
        )!important;

    color:#783116!important;

    font-size:.68rem!important;
    font-weight:800!important;

    box-shadow:
        0 -12px 24px rgba(244,245,246,.94)!important;
}

.builder-scroll-cue strong{
    color:#A23A0D!important;
}

/* ---------------------------------------------------------
   QUICK STATUS / EXPORT READABILITY
   --------------------------------------------------------- */

.quick-status-item span{
    color:#626A72!important;

    font-size:.60rem!important;
    font-weight:750!important;
}

.quick-status-item strong{
    color:#20262B!important;

    font-size:.75rem!important;
    font-weight:780!important;
}

.quick-status-scansafe span{
    color:#24704F!important;
}

.quick-status-scansafe strong{
    color:#11704A!important;
}

.builder-actions-copy .builder-kicker{
    font-size:.69rem!important;
}

.builder-actions-copy strong{
    color:#20262B!important;

    font-size:.84rem!important;
}

.builder-actions-copy p{
    color:#5D656D!important;

    font-size:.69rem!important;
    line-height:1.5!important;
}

.builder-button{
    font-size:.70rem!important;
    font-weight:780!important;
}

/* ---------------------------------------------------------
   SCANSAFE READABILITY
   --------------------------------------------------------- */

.scansafe-panel .builder-kicker{
    font-size:.68rem!important;
}

.scansafe-title{
    font-size:.86rem!important;
    font-weight:800!important;
}

.scansafe-score-row strong{
    font-size:1.55rem!important;
    line-height:1!important;
}

.scansafe-score-row span,
.scansafe-status{
    color:#3E464D!important;

    font-size:.72rem!important;
    font-weight:700!important;
}

.scansafe-panel p,
.scansafe-copy,
.scansafe-description{
    color:#5D656D!important;

    font-size:.70rem!important;
    line-height:1.55!important;
}

.scansafe-live-metrics span{
    color:#646C74!important;

    font-size:.60rem!important;
    font-weight:760!important;
}

.scansafe-live-metrics strong{
    font-size:.73rem!important;
    font-weight:780!important;
}

.scansafe-check strong{
    color:#2B3137!important;

    font-size:.72rem!important;
    font-weight:770!important;
}

.scansafe-check small{
    color:#5F6770!important;

    font-size:.68rem!important;
    line-height:1.48!important;
}

.scansafe-print-profile>small{
    color:#5F6770!important;

    font-size:.65rem!important;
    line-height:1.5!important;
}

.scansafe-profile-grid label>span{
    color:#5C646C!important;

    font-size:.61rem!important;
    font-weight:760!important;
}

/* ---------------------------------------------------------
   PRINT FORECAST / MODEL METRICS
   --------------------------------------------------------- */

.print-forecast-grid span,
.metric-label{
    color:#616971!important;

    font-size:.60rem!important;
    font-weight:760!important;
}

.print-forecast-grid strong,
.metric-value{
    color:#23292F!important;

    font-size:.73rem!important;
    font-weight:780!important;
}

.print-forecast-footer>span small{
    color:#656D75!important;

    font-size:.60rem!important;
}

.print-forecast-footer p{
    color:#606870!important;

    font-size:.66rem!important;
    line-height:1.5!important;
}

/* ---------------------------------------------------------
   HELP / MICROCOPY
   --------------------------------------------------------- */

.editor-mode-guidance strong{
    color:#30363C!important;

    font-size:.72rem!important;
}

.editor-mode-guidance p{
    color:#59616A!important;

    font-size:.67rem!important;
    line-height:1.52!important;
}

.ux-help-body{
    color:#596169!important;

    font-size:.70rem!important;
    line-height:1.6!important;
}

/* ---------------------------------------------------------
   MOBILE — DON'T SHRINK IMPORTANT TEXT TOO FAR
   --------------------------------------------------------- */

@media(max-width:899px){
    .mode-option-content{
        min-height:68px!important;
    }

    .mode-option-content strong{
        font-size:.76rem!important;
    }

    .mode-option-content small{
        font-size:.67rem!important;
    }

    .quick-status-item span,
    .scansafe-live-metrics span,
    .print-forecast-grid span,
    .metric-label{
        font-size:.61rem!important;
    }

    .quick-status-item strong,
    .scansafe-live-metrics strong,
    .print-forecast-grid strong,
    .metric-value{
        font-size:.73rem!important;
    }
}

@media(max-width:420px){
    .mode-selector{
        grid-template-columns:1fr!important;
    }

    .mode-option-content{
        min-height:62px!important;
    }
}


/* =========================================================
   BUILD 0.8.6 — FINAL UX QA / GUARDRAILS
   Conservative pass over the approved 0.8.5 visual system.
   ========================================================= */

html,
body{
    max-width:100%;
    overflow-x:clip;
}

img,
svg,
canvas{
    max-width:100%;
}

.generator-shell,
.builder-workspace,
.builder-controls,
.builder-preview,
.scansafe-panel,
.print-intelligence,
.builder-actions{
    min-width:0;
}

.generator-shell{
    overflow:hidden;
}

.builder-panel,
.builder-controls,
.builder-preview{
    overscroll-behavior:contain;
}

/* Keep supporting copy readable without making the UI oversized. */
.builder-controls small,
.template-card small,
.qr-type-hint,
.advanced-control small,
.editor-mode-guidance p,
.keychain-position-guide p,
.stand-guide p,
.wifi-sign-guide p,
.review-sign-guide p,
.builder-actions-copy p,
.scansafe-panel p,
.scansafe-check small,
.scansafe-print-profile>small,
.print-forecast-footer p,
.ux-help-body{
    font-size:max(.68rem,11px)!important;
    line-height:1.52!important;
}

/* Stronger hierarchy for controls that users must act on. */
.builder-controls label,
.control-heading label,
#relief-label,
.qr-field label,
.advanced-control strong,
.template-card strong,
.keychain-option-heading strong,
.stand-option-heading strong,
.wifi-sign-heading strong,
.review-sign-heading strong{
    color:#30363C!important;
}

/* Avoid accidental text clipping in status/metric cards. */
.quick-status-item,
.scansafe-live-metrics>div,
.print-forecast-grid>div,
.model-metric{
    overflow:hidden;
}

.quick-status-item strong,
.scansafe-live-metrics strong,
.print-forecast-grid strong,
.metric-value{
    max-width:100%;
    overflow-wrap:anywhere;
}

/* Main action buttons stay legible at every breakpoint. */
.builder-button,
.builder-next-button,
.header-cta,
.scansafe-autofix,
.wifi-use-content,
.review-use-url{
    font-weight:780!important;
    letter-spacing:0!important;
}

/* Preserve the dedicated dark viewer without darkening surrounding dashboards. */
.builder-preview .builder-kicker,
.builder-preview .preview-help{
    text-shadow:none!important;
}

/* Tablet: give controls enough width and keep viewer dominant. */
@media(min-width:900px) and (max-width:1180px){
    .builder-workspace{
        grid-template-columns:minmax(310px,36%) minmax(0,1fr)!important;
    }

    .builder-controls{
        min-width:0!important;
    }

    .builder-preview{
        min-width:0!important;
    }

    .builder-action-buttons{
        gap:8px!important;
    }

    .builder-button{
        padding-inline:10px!important;
    }
}

/* Mobile: final overflow safeguards. */
@media(max-width:899px){
    .site-header,
    .header-inner,
    .header-tools,
    .builder-workspace,
    .builder-controls,
    .builder-preview,
    .builder-panel,
    .builder-actions,
    .scansafe-panel,
    .print-intelligence{
        max-width:100%!important;
    }

    .builder-flow-nav{
        max-width:100%!important;
    }

    .template-grid,
    .qr-type-grid,
    .color-grid,
    .builder-action-buttons,
    .scansafe-live-metrics,
    .scansafe-profile-grid,
    .print-forecast-grid,
    .model-metrics{
        min-width:0!important;
    }

    .viewer-frame,
    .qr-3d-viewer{
        width:100%!important;
        max-width:100%!important;
    }

    .view-mode-switch{
        width:100%!important;
    }

    .view-mode-button{
        flex:1 1 0!important;
        min-width:0!important;
    }
}

@media(max-width:430px){
    .builder-controls{
        padding-inline:10px!important;
    }

    .builder-flow-step{
        flex-basis:96px!important;
        width:96px!important;
        min-width:96px!important;
        max-width:96px!important;
    }

    .builder-flow-step strong{
        font-size:.65rem!important;
    }

    .template-grid{
        grid-template-columns:1fr!important;
    }

    .template-card-wide{
        grid-column:auto!important;
    }

    .scansafe-heading-row,
    .print-forecast-head{
        gap:8px!important;
    }

    .scansafe-profile{
        white-space:normal!important;
        text-align:center;
    }
}

@media(max-width:360px){
    .language-switch{
        width:64px!important;
        min-width:64px!important;
    }

    .header-cta{
        min-width:54px!important;
        padding-inline:7px!important;
    }

    .builder-flow-step{
        flex-basis:92px!important;
        width:92px!important;
        min-width:92px!important;
        max-width:92px!important;
    }

    .mobile-builder-switch-button{
        font-size:.68rem!important;
    }
}


/* BUILD 0.9.0 — localized hero title split */
.hero h1 .hero-title-main{
    color:var(--text)!important;
    -webkit-text-fill-color:var(--text)!important;
}

.hero h1 .hero-title-accent{
    color:var(--primary)!important;
    -webkit-text-fill-color:var(--primary)!important;
}


/* =========================================================
   BUILD 0.9.1 — HOME SEO / INTENT SECTIONS
   ========================================================= */

.home-content-section{
    padding:72px 0;
    border-top:1px solid var(--border);
}

.home-features,
.home-how{
    background:#FFFFFF;
}

.home-examples{
    background:#F4F5F6;
}

.home-section-heading{
    max-width:780px;
    margin-bottom:28px;
}

.home-section-heading>span{
    color:var(--primary);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.home-section-heading h2{
    margin:9px 0 10px;
    color:#20252A;
    font-size:clamp(30px,4vw,46px);
    line-height:1.06;
    letter-spacing:-.04em;
}

.home-section-heading p{
    margin:0;
    color:#626A73;
    font-size:15px;
    line-height:1.68;
}

.home-feature-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}

.home-feature-grid article{
    padding:24px;
    border:1px solid #E0E3E6;
    border-radius:14px;
    background:#FAFAF9;
}

.home-feature-grid article>span,
.home-how-grid article>span{
    color:#B64A1C;
    font-size:11px;
    font-weight:900;
}

.home-feature-grid h3,
.home-how-grid h3{
    margin:20px 0 8px;
    color:#252A30;
    font-size:18px;
}

.home-feature-grid p,
.home-how-grid p{
    margin:0;
    color:#626A73;
    font-size:14px;
    line-height:1.62;
}

.home-intent-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
}

.home-intent-grid a{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:72px;
    padding:14px 16px;
    border:1px solid #DDE1E5;
    border-radius:12px;
    background:#FFFFFF;
    color:#2D3339;
    text-decoration:none;
    transition:border-color .16s ease,transform .16s ease;
}

.home-intent-grid a:hover{
    border-color:#D29A7D;
    transform:translateY(-1px);
}

.home-intent-grid a>span{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:none;
    border-radius:10px;
    background:#FFF0E8;
    color:#96360F;
    font-size:11px;
    font-weight:900;
}

.home-intent-grid strong{
    font-size:14px;
}

.home-how-grid{
    overflow:hidden;
    border:1px solid #E0E3E6;
    border-radius:15px;
    background:#FAFAF9;
}

.home-how-grid article{
    display:grid;
    grid-template-columns:60px minmax(0,1fr);
    gap:18px;
    padding:24px;
}

.home-how-grid article+article{
    border-top:1px solid #E3E6E9;
}

.home-how-grid h3{
    margin:0 0 8px;
}

@media(max-width:760px){
    .home-content-section{
        padding:48px 0;
    }

    .home-feature-grid,
    .home-intent-grid{
        grid-template-columns:1fr;
    }

    .home-how-grid article{
        grid-template-columns:1fr;
        gap:8px;
    }
}


/* =========================================================
   BUILD 0.9.1.1 — GLOBAL HEADER CONTROL HOTFIX
   Header controls must look identical on app + intent pages.
   ========================================================= */

.header-tools{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    flex:0 0 auto!important;
}

.language-switch{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;

    width:auto!important;
    min-width:104px!important;
    height:42px!important;

    padding:4px 5px 4px 9px!important;

    border:1px solid var(--border)!important;
    border-radius:10px!important;

    background:#FFFFFF!important;
    color:var(--text)!important;

    box-shadow:
        0 1px 1px rgba(17,24,39,.03)!important;

    overflow:hidden!important;
    box-sizing:border-box!important;
}

.language-globe{
    flex:none!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    color:var(--primary)!important;

    font-size:.92rem!important;
    line-height:1!important;
}

.language-options{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;

    flex:1 1 auto!important;

    width:auto!important;
    min-width:66px!important;
    height:32px!important;

    padding:2px!important;
    gap:2px!important;

    border:1px solid #ECEEF0!important;
    border-radius:7px!important;

    background:#F4F5F6!important;

    box-sizing:border-box!important;
}

.language-option{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    width:100%!important;
    min-width:0!important;
    height:26px!important;
    min-height:26px!important;

    margin:0!important;
    padding:0 5px!important;

    border:0!important;
    border-radius:5px!important;

    background:transparent!important;
    color:#6D747D!important;

    font:inherit!important;
    font-size:.66rem!important;
    font-weight:900!important;
    line-height:1!important;
    letter-spacing:.02em!important;

    cursor:pointer!important;

    box-sizing:border-box!important;
}

.language-option:hover{
    color:var(--text)!important;
}

.language-option.is-active{
    background:var(--primary)!important;
    color:#FFFFFF!important;
    box-shadow:none!important;
}

.language-option:focus-visible{
    outline:2px solid #E19A76!important;
    outline-offset:1px!important;
}

.header-cta{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;

    white-space:nowrap!important;
}

.header-cta-label-desktop{
    display:inline!important;
}

.header-cta-label-mobile{
    display:none!important;
}

/* Tablet still keeps the full language control. */
@media(max-width:899px){
    .header-tools .language-switch{
        display:flex!important;
    }

    .header-inner{
        gap:12px!important;
    }

    .header-tools{
        gap:8px!important;
    }

    .language-switch{
        min-width:98px!important;
    }
}

/* Phone: compact EN/ES pill and short CTA label. */
@media(max-width:600px){
    .header-tools{
        gap:6px!important;
    }

    .language-switch{
        width:72px!important;
        min-width:72px!important;
        height:38px!important;

        padding:3px!important;
        gap:0!important;

        border-radius:9px!important;
    }

    .language-globe{
        display:none!important;
    }

    .language-options{
        width:100%!important;
        min-width:0!important;
        height:30px!important;
    }

    .language-option{
        height:24px!important;
        min-height:24px!important;
        padding:0 3px!important;
        font-size:.62rem!important;
    }

    .header-cta{
        min-width:64px!important;
        min-height:38px!important;
        height:38px!important;

        padding:0 10px!important;
        gap:5px!important;

        border-radius:9px!important;

        font-size:.70rem!important;
        line-height:1!important;
    }

    .header-cta-label-desktop{
        display:none!important;
    }

    .header-cta-label-mobile{
        display:inline!important;
    }
}

@media(max-width:390px){
    .language-switch{
        width:68px!important;
        min-width:68px!important;
    }

    .header-cta{
        min-width:58px!important;
        padding-inline:8px!important;
    }
}


/* BUILD 0.9.3 — Home architecture links */
.home-library-links{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:18px;
}

.home-library-links>span{
    margin-right:4px;
    color:#747C84;
    font-size:11px;
    font-weight:750;
}

.home-library-links>a{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 11px;
    border:1px solid #DCE0E4;
    border-radius:9px;
    background:#FFFFFF;
    color:#6C351E;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
}

.home-library-links>a:hover{
    border-color:#D39A7D;
    color:#96360F;
}


/* =========================================================
   BUILD 0.10.0 — REVENUE SLOT SYSTEM
   ========================================================= */

.revenue-slot{
    width:min(100% - 32px,1180px);
    margin:30px auto;
    padding:0;
    overflow:hidden;
    text-align:center;
}

.revenue-slot-label{
    display:block;
    margin-bottom:7px;
    color:#8A9097;
    font-size:9px;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.revenue-slot--wide,
.revenue-slot .adsbygoogle{
    min-height:120px;
}

.revenue-slot .adsbygoogle{
    width:100%;
}

.revenue-slot--preview{
    min-height:0;
}

.revenue-slot-preview-box{
    min-height:132px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:18px;
    border:1px dashed #D4A68D;
    border-radius:13px;
    background:#FFF8F4;
    color:#6E351D;
}

.revenue-slot-preview-box strong{
    font-size:12px;
}

.revenue-slot-preview-box small{
    max-width:520px;
    color:#7A685F;
    font-size:10px;
    line-height:1.5;
}

@media(max-width:600px){
    .revenue-slot{
        width:min(100% - 20px,1180px);
        margin:22px auto;
    }

    .revenue-slot--wide,
    .revenue-slot .adsbygoogle{
        min-height:100px;
    }

    .revenue-slot-preview-box{
        min-height:110px;
    }
}


/* BUILD 0.10.1 — TRUST FOOTER */

.footer-trust-grid{
    display:grid;
    grid-template-columns:minmax(230px,1.4fr) repeat(3,minmax(135px,.7fr));
    gap:34px;
    padding:48px 0 32px;
}

.footer-brand-column>strong{
    color:#20252A;
    font-size:15px;
}

.footer-brand-column p{
    max-width:300px;
    margin:6px 0 12px;
    color:#69717A;
    font-size:12px;
    line-height:1.55;
}

.footer-privacy-note{
    display:block;
    max-width:310px;
    color:#8A9097;
    font-size:10px;
    line-height:1.5;
}

.footer-link-group{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px;
}

.footer-link-group>strong{
    margin-bottom:3px;
    color:#30363C;
    font-size:11px;
    font-weight:850;
}

.footer-link-group>a{
    color:#6C737B;
    font-size:11px;
    text-decoration:none;
}

.footer-link-group>a:hover{
    color:var(--primary);
}

.footer-bottom{
    min-height:54px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border-top:1px solid #E5E8EA;
    color:#8A9097;
    font-size:9px;
    line-height:1.5;
}

@media(max-width:900px){
    .footer-trust-grid{
        grid-template-columns:1.4fr 1fr 1fr;
    }

    .footer-brand-column{
        grid-column:1/-1;
    }
}

@media(max-width:600px){
    .footer-trust-grid{
        grid-template-columns:1fr 1fr;
        gap:28px 20px;
        padding:38px 0 26px;
    }

    .footer-brand-column{
        grid-column:1/-1;
    }

    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
        padding:18px 0;
    }
}


/* =========================================================
   BUILD 0.10.2 — QUICK STATUS CLIPPING HOTFIX
   Screenshot regression: ScanSafe summary was clipped.
   ========================================================= */

@media(min-width:900px){
    .builder-quick-status{
        grid-template-columns:
            minmax(270px,1.65fr)
            repeat(4,minmax(108px,1fr))!important;
    }

    .quick-status-scansafe{
        min-width:0!important;
        align-items:center!important;
    }

    .quick-status-scansafe>span{
        flex:0 0 auto!important;
    }

    .quick-status-scansafe>strong{
        flex:1 1 auto!important;
        min-width:0!important;
        white-space:normal!important;
        overflow:visible!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
        text-align:right!important;
        line-height:1.25!important;
    }
}

@media(min-width:900px) and (max-width:1180px){
    .builder-quick-status{
        grid-template-columns:
            minmax(245px,1.75fr)
            repeat(4,minmax(96px,1fr))!important;
    }
}

@media(max-width:899px){
    .quick-status-scansafe>strong{
        white-space:normal!important;
        overflow:visible!important;
        overflow-wrap:normal!important;
        word-break:normal!important;
        line-height:1.3!important;
    }
}


/* =========================================================
   BUILD 0.10.2 — PRIVACY CHOICES + ANALYTICS PREVIEW
   ========================================================= */

.footer-privacy-button{
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#6C737B;
    font:inherit;
    font-size:11px;
    text-align:left;
    cursor:pointer;
}

.footer-privacy-button:hover{
    color:var(--primary);
}

.privacy-center[hidden]{
    display:none!important;
}

.privacy-center{
    position:fixed;
    inset:0;
    z-index:1000;
}

.privacy-center-backdrop{
    position:absolute;
    inset:0;
    background:rgba(16,20,24,.55);
    backdrop-filter:blur(3px);
}

.privacy-center-dialog{
    position:absolute;
    left:50%;
    bottom:22px;
    width:min(calc(100% - 28px),650px);
    max-height:min(82vh,720px);
    overflow:auto;
    transform:translateX(-50%);
    padding:22px;
    border:1px solid #DDE1E5;
    border-radius:17px;
    background:#FFFFFF;
    box-shadow:0 24px 70px rgba(17,24,39,.22);
}

.privacy-center-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.privacy-center-kicker{
    display:block;
    margin-bottom:5px;
    color:#A23C0F;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.privacy-center-head h2{
    margin:0;
    color:#20252A;
    font-size:24px;
    line-height:1.15;
    letter-spacing:-.025em;
}

.privacy-center-close{
    flex:none;
    width:34px;
    height:34px;
    border:1px solid #DDE1E5;
    border-radius:9px;
    background:#F5F6F7;
    color:#444B52;
    font-size:20px;
    cursor:pointer;
}

.privacy-center-description{
    margin:12px 0 18px;
    color:#626A73;
    font-size:12px;
    line-height:1.6;
}

.privacy-choice-list{
    overflow:hidden;
    border:1px solid #E0E3E6;
    border-radius:13px;
}

.privacy-choice{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
    padding:16px;
    background:#FFFFFF;
}

.privacy-choice+.privacy-choice{
    border-top:1px solid #E8EAEC;
}

.privacy-choice strong{
    color:#2B3036;
    font-size:12px;
}

.privacy-choice p{
    margin:5px 0 0;
    color:#68717A;
    font-size:10px;
    line-height:1.5;
}

.privacy-choice-service-status{
    display:block;
    margin-top:6px;
    color:#8B6848;
    font-size:9px;
    font-weight:800;
}

.privacy-choice-state{
    flex:none;
    padding:6px 8px;
    border:1px solid #DED8D2;
    border-radius:999px;
    background:#F9F6F3;
    color:#72523D;
    font-size:8px;
    font-weight:850;
    white-space:nowrap;
}

.privacy-choice-state.is-required{
    border-color:#CDE3D7;
    background:#F2FAF6;
    color:#27664B;
}

.privacy-toggle{
    position:relative;
    width:46px;
    height:26px;
    padding:0;
    border:1px solid #CBD0D5;
    border-radius:999px;
    background:#E9ECEF;
    cursor:pointer;
}

.privacy-toggle span{
    position:absolute;
    top:3px;
    left:3px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#FFFFFF;
    box-shadow:0 1px 4px rgba(17,24,39,.18);
    transition:transform .16s ease;
}

.privacy-toggle.is-active{
    border-color:#C84A11;
    background:#C84A11;
}

.privacy-toggle.is-active span{
    transform:translateX(20px);
}

.privacy-toggle:disabled{
    opacity:.46;
    cursor:not-allowed;
}

.privacy-center-note{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid #E6D8C8;
    border-radius:9px;
    background:#FFF9F3;
    color:#756353;
    font-size:9px;
    line-height:1.5;
}

.privacy-center-actions{
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:16px;
}

body.privacy-center-open{
    overflow:hidden;
}

.analytics-preview-badge{
    position:fixed;
    left:12px;
    bottom:12px;
    z-index:900;
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:9px 11px;
    border:1px solid #CFC5B7;
    border-radius:9px;
    background:rgba(255,251,246,.96);
    box-shadow:0 6px 22px rgba(17,24,39,.10);
    pointer-events:none;
}

.analytics-preview-badge strong{
    color:#844117;
    font-size:9px;
}

.analytics-preview-badge span{
    color:#78695E;
    font-size:8px;
}

@media(max-width:600px){
    .privacy-center-dialog{
        bottom:0;
        width:100%;
        max-height:88vh;
        border-radius:17px 17px 0 0;
        border-left:0;
        border-right:0;
        border-bottom:0;
    }

    .privacy-choice{
        align-items:flex-start;
    }

    .privacy-center-actions{
        flex-direction:column-reverse;
    }

    .privacy-center-actions .button{
        width:100%;
        justify-content:center;
    }
}


/* =========================================================
   BUILD 0.10.4 — TRUST SIGNALS
   ========================================================= */

.trust-signal-band{
    padding:58px 0;
    border-top:1px solid #E3E6E8;
    border-bottom:1px solid #E3E6E8;
    background:#F7F8F8;
}

.trust-signal-band--intent{
    padding:42px 0;
    background:#FFFFFF;
}

.trust-signal-heading{
    max-width:820px;
    margin-bottom:24px;
}

.trust-signal-heading>span{
    display:block;
    margin-bottom:7px;
    color:#A43D10;
    font-size:9px;
    font-weight:900;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.trust-signal-heading h2{
    margin:0;
    color:#20252A;
    font-size:clamp(26px,3.2vw,39px);
    line-height:1.08;
    letter-spacing:-.035em;
}

.trust-signal-heading>p{
    max-width:760px;
    margin:10px 0 0;
    color:#626A73;
    font-size:13px;
    line-height:1.65;
}

.trust-signal-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:11px;
}

.trust-signal-card{
    min-width:0;
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:18px;
    border:1px solid #DDE1E4;
    border-radius:13px;
    background:#FFFFFF;
}

.trust-signal-icon{
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid #E7C7B6;
    border-radius:9px;
    background:#FFF2EA;
    color:#A23D0F;
}

.trust-signal-icon svg{
    width:18px;
    height:18px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.trust-signal-card h3{
    margin:1px 0 5px;
    color:#2A3036;
    font-size:12px;
    line-height:1.3;
}

.trust-signal-card p{
    margin:0;
    color:#68717A;
    font-size:10px;
    line-height:1.55;
}

.trust-signal-footnote{
    margin:14px 0 0;
    color:#7C848C;
    font-size:9px;
    line-height:1.5;
}

.trust-signal-band--intent .trust-signal-heading{
    margin-bottom:18px;
}

.trust-signal-band--intent .trust-signal-heading h2{
    font-size:clamp(23px,2.7vw,32px);
}

.trust-signal-band--intent .trust-signal-card{
    padding:15px;
}

@media(max-width:1000px){
    .trust-signal-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px){
    .trust-signal-band,
    .trust-signal-band--intent{
        padding:38px 0;
    }

    .trust-signal-grid{
        grid-template-columns:1fr;
    }

    .trust-signal-card{
        padding:15px;
    }

    .trust-signal-heading>p{
        font-size:12px;
    }
}


/* =========================================================
   BUILD 0.11.2 — CWV RENDERING OPTIMIZATION
   ========================================================= */

@supports (content-visibility:auto){
    .home-features,
    .home-examples,
    .home-how,
    .content-benefits,
    .content-workflow,
    .content-faq,
    .content-final-cta,
    .related-workflows,
    .trust-document{
        content-visibility:auto;
        contain-intrinsic-size:auto 520px;
    }
}


/* =========================================================
   MODUQR BRAND IDENTITY — 1.0
   ========================================================= */

.brand{
    gap:9px!important;
}

.brand-mark{
    width:30px!important;
    height:30px!important;
    display:block!important;
    transform:none!important;
    flex:0 0 30px!important;
}

.brand-mark img{
    display:block!important;
    width:100%!important;
    height:100%!important;
}

.brand-name{
    color:var(--text)!important;
    font-weight:790!important;
    letter-spacing:-.035em!important;
}

.brand-name .brand-name-accent{
    color:var(--primary)!important;
    font-weight:850!important;
}

@media(max-width:600px){
    .brand-mark{
        width:25px!important;
        height:25px!important;
        flex-basis:25px!important;
    }

    .brand-name{
        font-size:17px!important;
    }
}