.logo-visualizer-section{
    --viz-brand:#6b39f4;
    --viz-brand-rgb:107,57,244;
    --viz-support-1:#d6effd;
    --viz-support-2:#cfbef6;
    --viz-neutral:#17171c;
    --viz-on-brand:#fff;
    --viz-on-brand-filter:brightness(0) invert(1);
    --viz-ink:#17171c;
    --viz-copy:#6f6a7a;
    --viz-soft:#f7f7ff;
    --viz-line:rgba(23,23,28,.09);
    background:#fff;
    isolation:isolate;
    overflow:hidden;
    padding:116px 0 124px;
    position:relative;
}

.logo-visualizer-section:before{
    background-image:
        linear-gradient(rgba(107,57,244,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(107,57,244,.044) 1px, transparent 1px);
    background-position:center top;
    background-size:56px 56px;
    content:"";
    height:540px;
    left:0;
    mask-image:radial-gradient(ellipse 84% 72% at 50% 24%, #000 0%, rgba(0,0,0,.68) 58%, transparent 92%);
    opacity:.68;
    pointer-events:none;
    position:absolute;
    right:0;
    top:0;
    -webkit-mask-image:radial-gradient(ellipse 84% 72% at 50% 24%, #000 0%, rgba(0,0,0,.68) 58%, transparent 92%);
    z-index:0;
}

.logo-visualizer-section > .container{
    position:relative;
    z-index:1;
}

@media (max-width:767px){
    .logo-visualizer-section:before{
        background-size:48px 48px;
        height:420px;
        mask-image:radial-gradient(ellipse 100% 72% at 50% 22%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.42) 58%, transparent 92%);
        opacity:.5;
        -webkit-mask-image:radial-gradient(ellipse 100% 72% at 50% 22%, rgba(0,0,0,.82) 0%, rgba(0,0,0,.42) 58%, transparent 92%);
    }
}

.logo-visualizer-section,
.logo-visualizer-section *,
.logo-visualizer-section *:before,
.logo-visualizer-section *:after{ box-sizing:border-box; }

.logo-visualizer-section > .container,
.logo-visualizer-shell,
.logo-visualizer-tool,
.logo-visualizer-panel,
.logo-visualizer-results{ min-width:0;width:100%; }

.logo-visualizer-shell{
    display:grid;
    gap:38px;
    margin:0 auto;
    max-width:1280px;
}

.logo-visualizer-intro{
    margin:0 auto 8px;
    max-width:920px;
}

.logo-visualizer-intro h5{
    color:#777;
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
    line-height:1.3;
    margin:0 0 12px;
}

.logo-visualizer-intro h1{ margin:0; }

.logo-visualizer-intro p{
    color:var(--viz-copy);
    font-size:16px;
    font-weight:400;
    line-height:1.7;
    margin:20px auto 0;
    max-width:780px;
}


.logo-visualizer-tool{
    --viz-logo-scale:1;
    display:grid;
    gap:22px;
    min-width:0;
}

.logo-visualizer-panel,
.logo-visualizer-results{
    background:#fff;
    border:1px solid var(--viz-line);
    border-radius:20px;
    box-shadow:0 34px 100px -82px rgba(24,18,44,.7);
}

.logo-visualizer-setup-panel{ padding:30px; }

.logo-visualizer-panel-head,
.logo-visualizer-results-head{
    align-items:flex-start;
    display:flex;
    gap:28px;
    justify-content:space-between;
}

.logo-visualizer-panel-head > div:first-child,
.logo-visualizer-results-head > div:first-child{
    max-width:760px;
}

.logo-visualizer-panel-head > div > span,
.logo-visualizer-results-head > div > span,
.logo-visualizer-marketing-head > span,
.logo-visualizer-marketing-split > div:first-child > span{
    color:var(--viz-brand);
    display:block;
    font-size:12px;
    font-weight:600;
    letter-spacing:0;
    line-height:1;
    margin-bottom:10px;
}

.logo-visualizer-panel-head h2,
.logo-visualizer-results-head h2{
    color:var(--viz-ink);
    font-size:27px;
    font-weight:600;
    letter-spacing:0;
    line-height:1.18;
    margin:0;
    max-width:100%;
    overflow-wrap:anywhere;
    white-space:normal;
}

.logo-visualizer-panel-head p,
.logo-visualizer-results-head p{
    color:#85808f;
    font-size:14px;
    font-weight:400;
    line-height:1.6;
    margin:9px 0 0;
}

.logo-visualizer-primary-button,
.logo-visualizer-secondary-button,
.logo-visualizer-text-button{
    align-items:center;
    border:0;
    border-radius:999px;
    cursor:pointer;
    display:inline-flex;
    font-size:14px;
    font-weight:500;
    gap:8px;
    justify-content:center;
    letter-spacing:0;
    line-height:1;
    min-height:42px;
    padding:0 18px;
    text-decoration:none;
    transition:background .2s ease,color .2s ease,transform .2s ease;
    white-space:nowrap;
}

.logo-visualizer-primary-button{
    background:var(--viz-brand);
    color:#fff;
}

.logo-visualizer-secondary-button{ background:#f4f3f7;color:#5f5968; }
.logo-visualizer-secondary-button:hover,
.logo-visualizer-secondary-button:focus{ background:#ece8f8;color:var(--viz-brand);text-decoration:none; }

.logo-visualizer-primary-button:hover,
.logo-visualizer-primary-button:focus{
    background:#5930d2;
    color:#fff;
    text-decoration:none;
    transform:translateY(-1px);
}

.logo-visualizer-text-button{
    background:#f7f7fb;
    color:#716b7d;
    min-height:38px;
    padding:0 14px;
}

.logo-visualizer-text-button:hover,
.logo-visualizer-text-button:focus{
    background:#f1edff;
    color:var(--viz-brand);
}

.logo-visualizer-panel-actions{
    align-items:center;
    display:flex;
    flex:0 0 auto;
    gap:8px;
}

.logo-visualizer-asset-grid{
    display:grid;
    gap:14px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:25px;
}

.logo-visualizer-asset{
    background:#fbfbfd;
    border:1px dashed rgba(107,57,244,.2);
    border-radius:18px;
    min-width:0;
    outline:0;
    overflow:hidden;
    padding:10px;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}

.logo-visualizer-asset:hover,
.logo-visualizer-asset:focus-visible,
.logo-visualizer-asset.is-dragging{
    border-color:rgba(107,57,244,.68);
    box-shadow:0 0 0 4px rgba(107,57,244,.08);
}

.logo-visualizer-asset.is-dragging{ transform:translateY(-2px); }

.logo-visualizer-asset-preview{
    align-items:center;
    background:#fff;
    border:1px solid rgba(23,23,28,.06);
    border-radius:14px;
    display:flex;
    height:152px;
    justify-content:center;
    overflow:hidden;
    padding:24px;
    position:relative;
}

.logo-visualizer-asset-preview img{
    display:block;
    max-height:82px;
    max-width:88%;
    object-fit:contain;
}

.logo-visualizer-asset-empty{
    align-items:center;
    color:#9a95a5;
    display:flex;
    flex-direction:column;
    font-size:13px;
    gap:9px;
    justify-content:center;
    text-align:center;
}

.logo-visualizer-asset-empty i{ color:var(--viz-brand);font-size:24px; }

.logo-visualizer-asset-meta{
    align-items:center;
    display:flex;
    gap:12px;
    justify-content:space-between;
    min-height:57px;
    padding:11px 4px 0 6px;
}

.logo-visualizer-asset-meta > div:first-child{
    display:grid;
    gap:4px;
    min-width:0;
}

.logo-visualizer-asset-meta strong{
    color:var(--viz-ink);
    font-size:13px;
    font-weight:500;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.logo-visualizer-asset-meta span{
    color:#9791a1;
    font-size:11px;
    font-weight:400;
    line-height:1.2;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.logo-visualizer-asset-actions{ display:flex;flex:0 0 auto;gap:3px; }

.logo-visualizer-asset-actions button{
    align-items:center;
    background:transparent;
    border:0;
    border-radius:9px;
    color:#918b9c;
    cursor:pointer;
    display:flex;
    height:34px;
    justify-content:center;
    padding:0;
    transition:background .18s ease,color .18s ease;
    width:34px;
}

.logo-visualizer-asset-actions button:hover,
.logo-visualizer-asset-actions button:focus{ background:#f1edff;color:var(--viz-brand); }

.logo-visualizer-brand-row{
    align-items:start;
    border-top:1px solid rgba(23,23,28,.07);
    display:grid;
    gap:30px;
    grid-template-columns:minmax(220px,4fr) minmax(0,8fr);
    margin-top:26px;
    padding-top:24px;
}

.logo-visualizer-palette{
    display:grid;
    gap:14px;
    outline:0;
}

.logo-visualizer-palette:focus-visible{
    border-color:rgba(107,57,244,.38);
}

.logo-visualizer-palette-copy{ display:grid;gap:5px; }
.logo-visualizer-palette-copy > span{
    color:var(--viz-ink);
    font-size:13px;
    font-weight:500;
}
.logo-visualizer-palette-copy p{
    color:#8a8495;
    font-size:12px;
    line-height:1.45;
    margin:0;
}
.logo-visualizer-palette-copy p a{ color:#77717e;text-decoration:underline;text-decoration-color:rgba(107,57,244,.3);text-underline-offset:2px; }
.logo-visualizer-palette-copy p a:hover{ color:var(--viz-brand); }

.logo-visualizer-palette-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    min-width:0;
}

.logo-visualizer-palette-items{ align-items:center;display:flex;gap:8px;min-width:0; }
.logo-visualizer-palette-items .logo-visualizer-palette-list{ flex:1; }

.logo-visualizer-palette-color{
    align-items:center;
    background:#fbfbfd;
    border:1px solid rgba(23,23,28,.08);
    border-radius:12px;
    display:grid;
    gap:10px;
    grid-template-columns:36px minmax(0,1fr);
    min-height:54px;
    min-width:152px;
    padding:8px 10px 8px 8px;
}

.logo-visualizer-palette-color input[type="color"]{
    background:transparent;
    border:0;
    border-radius:50%;
    cursor:pointer;
    height:36px;
    overflow:hidden;
    padding:0;
    width:36px;
}
.logo-visualizer-palette-color input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.logo-visualizer-palette-color input[type="color"]::-webkit-color-swatch{ border:0;border-radius:50%; }
.logo-visualizer-palette-color input[type="color"]::-moz-color-swatch{ border:0;border-radius:50%; }

.logo-visualizer-palette-color > span{
    display:grid;
    gap:3px;
    min-width:0;
}
.logo-visualizer-palette-name{ align-items:center;display:flex;gap:5px;justify-content:space-between;min-width:0; }
.logo-visualizer-palette-color strong{
    color:#5f5968;
    font-size:10px;
    line-height:10px;
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.logo-visualizer-palette-color small{
    color:#9a94a3;
    font-size:8px;
    line-height:8px;
    text-transform:capitalize;
}
.logo-visualizer-palette-color button,
.logo-visualizer-palette-add{
    align-items:center;
    background:transparent;
    border:0;
    border-radius:9px;
    color:#aaa4b1;
    cursor:pointer;
    display:flex;
    flex:0 0 20px;
    height:20px;
    justify-content:center;
    margin-left:0;
    padding:0;
    width:20px;
}
.logo-visualizer-palette-color button:hover,
.logo-visualizer-palette-add:hover{ background:#f1edff;color:var(--viz-brand); }
.logo-visualizer-palette-add{ background:#f7f7fb;flex-basis:38px;height:38px;margin:0;width:38px; }

.logo-visualizer-field,
.logo-visualizer-color-field,
.logo-visualizer-control-group{
    display:grid;
    gap:9px;
    margin:0;
    min-width:0;
}

.logo-visualizer-field > span,
.logo-visualizer-color-field > span:first-child,
.logo-visualizer-control-group > span{
    color:#625d6d;
    font-size:12px;
    font-weight:500;
    line-height:1.2;
}

.logo-visualizer-field input{
    background:#fbfbfd;
    border:1px solid rgba(23,23,28,.09);
    border-radius:12px;
    color:var(--viz-ink);
    font-size:14px;
    font-weight:400;
    height:42px;
    outline:0;
    padding:0 13px;
    width:100%;
}

.logo-visualizer-field input:focus{
    border-color:rgba(107,57,244,.55);
    box-shadow:0 0 0 3px rgba(107,57,244,.08);
}

.logo-visualizer-color-control{
    align-items:center;
    background:#fbfbfd;
    border:1px solid rgba(23,23,28,.09);
    border-radius:12px;
    display:flex;
    gap:9px;
    height:42px;
    padding:5px 11px 5px 6px;
}

.logo-visualizer-color-control input{
    background:transparent;
    border:0;
    border-radius:9px;
    cursor:pointer;
    height:30px;
    padding:0;
    width:34px;
}

.logo-visualizer-color-control code{
    color:#716b7d;
    font-family:inherit;
    font-size:12px;
    font-weight:400;
}

.logo-visualizer-segmented{
    align-items:center;
    background:#f5f4f8;
    border-radius:12px;
    display:grid;
    grid-auto-columns:1fr;
    grid-auto-flow:column;
    height:42px;
    padding:4px;
}

.logo-visualizer-segmented button{
    background:transparent;
    border:0;
    border-radius:9px;
    color:#817b8b;
    cursor:pointer;
    font-size:11px;
    font-weight:500;
    height:34px;
    line-height:1;
    padding:0 9px;
    white-space:nowrap;
}

.logo-visualizer-segmented button.is-active{
    background:#fff;
    box-shadow:0 4px 12px rgba(24,18,44,.08);
    color:var(--viz-ink);
}

.logo-visualizer-results{ padding:30px; }

.logo-visualizer-autosave-status{ align-items:center;background:#f5f5f7;border:1px solid rgba(23,23,28,.06);border-radius:999px;color:#918b98;display:inline-flex;font-size:10px;font-weight:400;gap:6px;min-height:28px;padding:0 10px;white-space:nowrap; }
.logo-visualizer-autosave-status i,
.logo-visualizer-autosave-status.is-saving i,
.logo-visualizer-autosave-status.is-saved i{ color:#9d97a4;font-size:11px; }
.logo-visualizer-autosave-status.is-error,
.logo-visualizer-autosave-status.is-error i{ color:#b94747; }

.logo-visualizer-results-head > .logo-visualizer-results-copy > .logo-visualizer-autosave-status{
    align-items:center;
    color:#918b98;
    display:inline-flex;
    font-size:10px;
    font-weight:400;
    line-height:1;
    margin:16px 0 0;
    min-height:30px;
    padding:6px 11px;
    width:max-content;
}

.logo-visualizer-results-actions{
    align-items:center;
    display:flex;
    flex:0 0 auto;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}

.logo-visualizer-preview-grid{
    align-items:start;
    display:grid;
    gap:32px;
    grid-template-columns:repeat(12,minmax(0,1fr));
    margin-top:26px;
}

.logo-visualizer-preview-card{
    background:#fff;
    border:1px solid rgba(23,23,28,.03);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:visible;
    padding:32px 16px;
    position:relative;
}

.logo-visualizer-preview-card:focus-within{ z-index:20; }

.logo-visualizer-preview-card > header{
    align-items:center;
    display:flex;
    gap:14px;
    justify-content:space-between;
    min-height:42px;
    padding:0 2px 14px;
}

.logo-visualizer-preview-card > header > div{
    align-items:center;
    display:flex;
    gap:9px;
    min-width:0;
}

.logo-visualizer-preview-card > header span{
    color:var(--viz-brand);
    font-size:10px;
    font-weight:600;
}

.logo-visualizer-preview-card > header h3{
    color:var(--viz-ink);
    font-size:14px;
    font-weight:500;
    letter-spacing:0;
    line-height:1.25;
    margin:0;
}

.logo-visualizer-context-select{ margin:0;position:relative; }
.logo-visualizer-context-select{ flex:0 0 auto; }
.logo-visualizer-context-actions{ align-items:center;display:flex;flex:0 0 auto;gap:6px;position:relative; }

.logo-visualizer-context-select select{
    appearance:none;
    background:#fff;
    border:1px solid rgba(23,23,28,.08);
    border-radius:10px;
    color:#706a7a;
    cursor:pointer;
    font-size:10px;
    font-weight:400;
    height:32px;
    max-width:132px;
    outline:0;
    padding:0 27px 0 10px;
}

.logo-visualizer-context-select i{
    color:#aaa5b2;
    font-size:8px;
    pointer-events:none;
    position:absolute;
    right:10px;
    top:12px;
}

.logo-visualizer-mockup-download,
.logo-visualizer-appearance-toggle{ align-items:center;background:#fff;border:1px solid rgba(23,23,28,.08);border-radius:10px;color:#8b8593;display:flex;height:32px;justify-content:center;padding:0;transition:background .18s ease,color .18s ease;width:32px; }
.logo-visualizer-mockup-download:hover,
.logo-visualizer-mockup-download:focus,
.logo-visualizer-appearance-toggle:hover,
.logo-visualizer-appearance-toggle:focus,
.logo-visualizer-appearance-toggle[aria-expanded="true"]{ background:#f1edff;color:var(--viz-brand); }
.logo-visualizer-mockup-download.is-loading i{ animation:logoVisualizerSpin .8s linear infinite; }
.logo-visualizer-mockup-download.is-loading i:before{ content:"\f110"; }

.logo-visualizer-appearance-control{ position:relative; }
.logo-visualizer-appearance-menu{
    background:#fff;
    border:1px solid rgba(23,23,28,.09);
    border-radius:14px;
    box-shadow:0 20px 54px -25px rgba(23,23,28,.38);
    display:grid;
    gap:9px;
    padding:16px;
    position:absolute;
    right:0;
    top:calc(100% + 9px);
    width:264px;
    z-index:30;
}
.logo-visualizer-appearance-menu[hidden]{ display:none; }
.logo-visualizer-appearance-menu > strong{ color:var(--viz-ink);font-size:13px;font-weight:500; }
.logo-visualizer-preview-card > header .logo-visualizer-appearance-menu > span{ color:#8a8491;font-size:9px;font-weight:500;margin-top:3px;text-transform:uppercase; }
.logo-visualizer-appearance-menu > small{ color:#77717e;font-size:10px;line-height:1.35;margin-top:2px; }
.logo-visualizer-appearance-menu > small.is-low-contrast{ color:#b94747; }
.logo-visualizer-appearance-options{ align-items:center;display:flex;flex-wrap:wrap;gap:6px; }
.logo-visualizer-appearance-choice{ cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease,color .18s ease; }
.logo-visualizer-appearance-choice.is-mode{ background:#faf9fc;border:1px solid rgba(23,23,28,.08);border-radius:8px;color:#77717e;font-size:9px;height:27px;padding:0 8px; }
.logo-visualizer-appearance-choice.is-color{ background:var(--appearance-swatch);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(23,23,28,.12);height:24px;padding:0;width:24px; }
.logo-visualizer-appearance-choice.is-active{ border-color:var(--viz-brand);box-shadow:0 0 0 2px rgba(var(--viz-brand-rgb),.14);color:var(--viz-brand); }
.logo-visualizer-appearance-choice.is-color.is-active{ border-color:#fff;box-shadow:0 0 0 2px var(--viz-brand); }

@keyframes logoVisualizerSpin{ to{ transform:rotate(360deg); } }

.logo-visualizer-preview-card > footer{
    align-items:center;
    display:flex;
    gap:12px;
    justify-content:space-between;
    min-height:36px;
    padding:13px 2px 0;
}

.logo-visualizer-preview-card > footer span,
.logo-visualizer-preview-card > footer strong{
    color:#8f8998;
    font-size:10px;
    font-weight:400;
    line-height:1.3;
}

.logo-visualizer-preview-card > footer b{ color:#625d6d;font-weight:500; }
.logo-visualizer-preview-card > footer strong{ color:var(--viz-brand);font-weight:500;text-align:right; }

.logo-visualizer-preview-browser{ grid-column:span 7; }
.logo-visualizer-preview-social{ grid-column:span 5; }
.logo-visualizer-preview-google,
.logo-visualizer-preview-website{ grid-column:1/-1; }
.logo-visualizer-preview-mobile,
.logo-visualizer-preview-app,
.logo-visualizer-preview-dock,
.logo-visualizer-preview-scale,
.logo-visualizer-preview-email,
.logo-visualizer-preview-business{ grid-column:span 6; }
.logo-visualizer-preview-matcher{ grid-column:1/-1; }

.logo-visualizer-preview-grid [data-viz-logo]{
    display:block;
    object-fit:contain;
    transform:scale(var(--viz-logo-scale));
    transform-origin:center;
    transition:filter .25s ease,transform .25s ease;
}

[data-appearance-surface]{ position:relative; }
.logo-visualizer-treated-logo{
    background:var(--viz-brand);
    display:none;
    inset:var(--viz-appearance-inset,0);
    mask-position:center;
    mask-repeat:no-repeat;
    mask-size:contain;
    pointer-events:none;
    position:absolute;
    transform:scale(var(--viz-logo-scale));
    transform-origin:center;
    -webkit-mask-position:center;
    -webkit-mask-repeat:no-repeat;
    -webkit-mask-size:contain;
}
[data-appearance-surface].is-logo-tinted > img{ opacity:0!important; }
[data-appearance-surface].is-logo-tinted > .logo-visualizer-treated-logo{ display:block; }
.logo-visualizer-favicon{ --viz-appearance-inset:0;overflow:hidden; }
.logo-visualizer-favicon-inspection{ --viz-appearance-inset:24px;overflow:hidden; }
.logo-visualizer-social-avatar{ --viz-appearance-inset:13px;overflow:hidden; }
.logo-visualizer-google-source > span{ --viz-appearance-inset:7px;overflow:hidden; }
.logo-visualizer-ios-app-focus b,
.logo-visualizer-dock-island .is-brand{ --viz-appearance-inset:9px; }

.logo-visualizer-browser-window{
    background:#fff;
    border:1px solid rgba(23,23,28,.1);
    border-radius:14px;
    box-shadow:0 18px 45px -34px rgba(23,23,28,.58);
    min-height:378px;
    overflow:hidden;
}

.logo-visualizer-browser-tabs{
    align-items:end;
    background:#e9e8ed;
    display:flex;
    gap:8px;
    height:64px;
    padding:0 18px;
}

.logo-visualizer-window-dots{ display:flex;gap:7px;margin:0 14px 21px 0; }
.logo-visualizer-window-dots i{ background:#bdb9c4;border-radius:50%;height:9px;width:9px; }
.logo-visualizer-window-dots i:first-child{ background:#ff6b5f; }
.logo-visualizer-window-dots i:nth-child(2){ background:#f6be4f; }
.logo-visualizer-window-dots i:nth-child(3){ background:#61c554; }

.logo-visualizer-browser-tab{
    align-items:center;
    background:#f8f8fa;
    border-radius:9px 9px 0 0;
    color:#5f5a66;
    display:flex;
    font-size:13px;
    gap:10px;
    height:48px;
    max-width:360px;
    padding:0 15px;
    width:56%;
}

.logo-visualizer-browser-tab > span:nth-child(2){ margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.logo-visualizer-browser-tab > i{ color:#9994a0;font-size:10px; }
.logo-visualizer-favicon{ align-items:center;display:flex;height:24px;justify-content:center;width:24px; }
.logo-visualizer-favicon img{ height:24px!important;max-width:24px!important;width:24px!important; }
.logo-visualizer-browser-tabs > button{ background:transparent;border:0;color:#79747f;font-size:11px;margin:0 0 15px;padding:8px; }

.logo-visualizer-browser-bar{
    align-items:center;
    background:#f8f8fa;
    border-bottom:1px solid rgba(23,23,28,.07);
    color:#9c97a2;
    display:flex;
    font-size:12px;
    gap:17px;
    height:64px;
    padding:0 20px;
}

.logo-visualizer-browser-bar > div{
    align-items:center;
    background:#eeedf1;
    border-radius:999px;
    color:#74707a;
    display:flex;
    flex:1;
    gap:8px;
    height:38px;
    padding:0 16px;
}

.logo-visualizer-browser-bar > div i{ font-size:9px; }

.logo-visualizer-browser-inspection{
    align-items:center;
    background:#fdfbff;
    display:flex;
    gap:22px;
    min-height:248px;
    padding:38px 44px;
}
.logo-visualizer-favicon-inspection{
    align-items:center;
    background:#f4f3f7;
    border:1px solid rgba(23,23,28,.08);
    border-radius:18px;
    display:flex;
    flex:0 0 112px;
    height:112px;
    justify-content:center;
}
.logo-visualizer-favicon-inspection img{ height:64px;max-width:64px;width:64px; }
.logo-visualizer-browser-inspection > div:last-child{ display:grid;gap:5px; }
.logo-visualizer-browser-inspection span{ color:var(--viz-brand);font-size:9px;font-weight:600;text-transform:uppercase; }
.logo-visualizer-browser-inspection strong{ color:var(--viz-ink);font-size:18px;font-weight:500; }
.logo-visualizer-browser-inspection small{ color:#8b8592;font-size:11px;line-height:1.5;max-width:310px; }

.logo-visualizer-social-stage{ align-items:flex-start;background:#fdfbff;border-radius:14px;display:flex;height:378px;justify-content:center;overflow:hidden;padding:18px 14px 0; }
.logo-visualizer-social-device{ flex:0 0 auto;height:610px;transform:scale(1.3);transform-origin:top center;width:350px; }
.logo-visualizer-social-frame{ background:#fff!important; }
.logo-visualizer-social-frame:before{ display:none; }
.logo-visualizer-social-frame .logo-visualizer-ios-status{ height:31px; }
.logo-visualizer-social-top{ align-items:center;border-bottom:1px solid rgba(23,23,28,.07);display:flex;font-size:10px;height:40px;justify-content:space-between;padding:0 14px; }
.logo-visualizer-social-top strong{ color:#242229;font-size:11px;font-weight:600; }
.logo-visualizer-social-profile{ align-items:center;display:grid;gap:14px;grid-template-columns:58px minmax(0,1fr);padding:13px 18px 7px; }
.logo-visualizer-social-avatar{ align-items:center;background:#fff;border:2px solid var(--viz-brand);border-radius:50%;display:flex;height:58px;justify-content:center;padding:13px;width:58px; }
.logo-visualizer-social-avatar img{ height:100%;max-width:100%;width:100%; }
.logo-visualizer-social-stats{ align-items:center;display:grid;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0; }
.logo-visualizer-social-stats span{ color:#77717e;display:grid;font-size:6.5px;gap:2px;line-height:1.25;min-width:0;text-align:center;white-space:nowrap; }
.logo-visualizer-social-stats b{ color:#29262f;font-size:11px;font-weight:600;line-height:1.25; }
.logo-visualizer-social-bio{ display:grid;gap:0;padding:0 16px; }
.logo-visualizer-social-bio strong{ color:#29262f;font-size:10px;font-weight:600;line-height:1.12; }
.logo-visualizer-social-bio > span{ color:#9993a0;font-size:8px;line-height:1.12; }
.logo-visualizer-social-bio p{ color:#615c68;font-size:8px;line-height:1.18;margin:0; }
.logo-visualizer-social-frame > a{ color:#2467a6;display:block;font-size:8px;line-height:1.1;margin:0 16px;text-decoration:none; }
.logo-visualizer-social-frame > button{ background:#f1f0f3;border:0;border-radius:6px;color:#38343e;font-size:8px;font-weight:600;height:25px;margin:7px 16px;width:calc(100% - 32px); }
.logo-visualizer-social-grid{ display:grid;gap:2px;grid-template-columns:repeat(3,1fr);margin-top:5px; }
.logo-visualizer-social-grid > div{ aspect-ratio:1;background:var(--viz-post-1,var(--viz-brand)); }
.logo-visualizer-social-grid > div:nth-child(2){ background:var(--viz-post-2,#17171c); }
.logo-visualizer-social-grid > div:nth-child(3){ background:var(--viz-post-3,#d9f2e7); }

.logo-visualizer-google-stage{ background:#fdfbff;border:1px solid rgba(23,23,28,.08);border-radius:14px;min-height:390px;padding:34px 52px; }
.logo-visualizer-google-brand{ color:#4285f4;font-size:28px;font-weight:600;letter-spacing:0;margin-bottom:20px; }
.logo-visualizer-google-brand::first-letter{ color:#4285f4; }
.logo-visualizer-google-search{ align-items:center;background-color:#fff;border:1px solid #dfe1e5;border-radius:999px;box-shadow:0 1px 3px rgba(60,64,67,.08);color:#4d5156;display:flex;font-size:14px;height:46px;justify-content:space-between;max-width:620px;padding:0 19px; }
.logo-visualizer-google-search i{ color:#4285f4;font-size:13px; }
.logo-visualizer-google-tabs{ border-bottom:1px solid #ebebeb;color:#70757a;display:flex;font-size:10px;gap:28px;margin:18px 0 0;max-width:700px;padding:0 10px 12px; }
.logo-visualizer-google-tabs strong{ color:#1a73e8;font-weight:500;position:relative; }
.logo-visualizer-google-tabs strong:after{ background:#1a73e8;bottom:-13px;content:"";height:2px;left:-9px;position:absolute;right:-9px; }
.logo-visualizer-google-result{ margin-top:27px;max-width:680px; }
.logo-visualizer-google-source{ align-items:center;display:flex;gap:11px; }
.logo-visualizer-google-source > span{ align-items:center;background:#f1f3f4;border-radius:50%;display:flex;height:30px;justify-content:center;padding:7px;width:30px; }
.logo-visualizer-google-source img{ height:100%;max-width:100%;width:100%; }
.logo-visualizer-google-source > div{ display:grid;gap:1px; }
.logo-visualizer-google-source strong{ color:#202124;font-size:11px;font-weight:500; }
.logo-visualizer-google-source small{ color:#4d5156;font-size:9px;line-height:10px}
.logo-visualizer-google-result h4{ color:#1a0dab;font-size:21px;font-weight:400;letter-spacing:0;line-height:1.3;margin:10px 0 6px; }
.logo-visualizer-google-result p{ color:#4d5156;font-size:12px;line-height:1.55;margin:0;max-width:620px; }

.logo-visualizer-website-stage{
    background:#fff;
    border:1px solid rgba(23,23,28,.08);
    border-radius:14px;
    min-height:410px;
    overflow:hidden;
}
.logo-visualizer-website-stage nav{ align-items:center;display:flex;height:82px;padding:0 38px; }
.logo-visualizer-website-stage nav > img{ max-height:34px;max-width:195px; }
.logo-visualizer-website-links{ color:#6c6673;display:flex;font-size:10px;gap:30px;margin-left:auto;margin-right:36px; }
.logo-visualizer-website-stage nav button{ background:#18171c;border:0;border-radius:999px;color:#fff;font-size:9px;height:36px;padding:0 18px; }
.logo-visualizer-website-stage nav button i{ margin-left:8px; }
.logo-visualizer-website-body{ background:#fdfbff;display:grid;grid-template-columns:1.05fr .95fr;min-height:328px;overflow:hidden;padding:52px 64px;position:relative; }
.logo-visualizer-website-body > div:first-child{ position:relative;z-index:1; }
.logo-visualizer-website-body span{ color:#6f736f;font-size:9px;font-weight:500;text-transform:uppercase; }
.logo-visualizer-website-body h4{ color:#181b18;font-size:42px;font-weight:500;letter-spacing:0;line-height:1.02;margin:30px 0 18px; }
.logo-visualizer-website-body p{ color:#717571;font-size:11px;margin:0; }
.logo-visualizer-website-art{ position:relative; }
.logo-visualizer-website-art i{ background:var(--viz-brand);border-radius:50%;height:250px;position:absolute;right:6%;top:-18px;width:250px; }
.logo-visualizer-website-art i:nth-child(2){ background:var(--viz-neutral);height:174px;right:42%;top:78px;width:174px; }
.logo-visualizer-website-art i:nth-child(3){ background:var(--viz-support-2);height:94px;right:4%;top:174px;width:94px; }

.logo-visualizer-mobile-stage{ padding:14px; }
.logo-visualizer-mobile-stage .logo-visualizer-ios-device{
    transform:scale(1.8);
    transform-origin:41% -11%;
}
.logo-visualizer-mobile-site{ background:#fff!important; }
.logo-visualizer-mobile-site:before{ display:none; }
.logo-visualizer-mobile-site nav{ align-items:center;display:flex;height:49px;justify-content:space-between;padding:5px 16px 0;position:relative;z-index:2; }
.logo-visualizer-mobile-site nav img{ max-height:18px;max-width:92px; }
.logo-visualizer-mobile-site nav button{ background:transparent;border:0;display:grid;gap:4px;padding:5px; }
.logo-visualizer-mobile-site nav button i{ background:#26232a;display:block;height:1px;width:15px; }
.logo-visualizer-mobile-hero{ background:#f7f7ff;color:#17171c;display:flex;flex-direction:column;height:244px;padding:28px 21px;position:relative;z-index:1; }
.logo-visualizer-mobile-hero span{ color:var(--viz-brand);font-size:7px;text-transform:uppercase; }
.logo-visualizer-mobile-hero strong{ font-size:25px;font-weight:500;line-height:1.04;margin-top:25px; }
.logo-visualizer-mobile-hero button{ align-self:flex-start;background:var(--viz-brand);border:0;border-radius:999px;color:var(--viz-on-brand);font-size:8px;height:29px;margin-top:auto;padding:0 15px; }
.logo-visualizer-mobile-site > footer{ align-items:center;color:#77717e;display:flex;font-size:7px;justify-content:space-between;padding:17px; }
.logo-visualizer-mobile-site > footer i{ background:#e5e2e9;border-radius:50%;height:25px;width:25px; }

.logo-visualizer-ios-stage{ align-items:center;background:#fdfbff;border-radius:14px;display:flex;justify-content:center;min-height:430px;overflow:hidden;padding:14px; }
.logo-visualizer-ios-device{ background:#e5e5e8;border:1px solid #fdfbff;border-radius:34px;box-shadow:0 22px 48px -30px rgba(23,23,28,.52);height:406px;padding:4px;position:relative;width:210px; }
.logo-visualizer-ios-device:before{ border:1px solid rgba(255,255,255,.88);border-radius:31px;content:"";inset:1px;pointer-events:none;position:absolute; }
.logo-visualizer-ios-screen{ background:linear-gradient(150deg,color-mix(in srgb,var(--viz-support-1) 72%,#fff),color-mix(in srgb,var(--viz-support-2) 72%,#fff) 54%,color-mix(in srgb,var(--viz-brand) 30%,#fff));border-radius:29px;height:100%;overflow:hidden;position:relative; }
.logo-visualizer-ios-screen:before{ background:rgba(255,255,255,.24);border-radius:50%;content:"";height:235px;position:absolute;right:-90px;top:62px;width:235px; }
.logo-visualizer-dynamic-island{ background:#050507;border-radius:999px;height:22px;left:50%;position:absolute;top:9px;transform:translateX(-50%);width:70px;z-index:4; }
.logo-visualizer-ios-status{ align-items:center;color:#242129;display:flex;font-size:7px;font-weight:600;justify-content:space-between;padding:14px 18px 0;position:relative;z-index:3; }
.logo-visualizer-ios-status div{ display:flex;font-size:6px;gap:4px; }
.logo-visualizer-ios-app-grid{ display:grid;gap:18px 10px;grid-template-columns:repeat(4,1fr);padding:50px 13px 0;position:relative;z-index:2; }
.logo-visualizer-ios-app-grid > span{ align-items:center;display:flex;flex-direction:column;gap:2px;min-width:0; }
.logo-visualizer-ios-app-grid b{ align-items:center;background:#fff;border-radius:10px;box-shadow:0 8px 18px -13px rgba(23,23,28,.7);display:flex;font-size:12px;font-style:normal;font-weight:600;height:35px;justify-content:center;overflow:hidden;width:35px; }
.logo-visualizer-ios-app-grid small{ color:#29252f;font-size:5px;line-height:10px;max-width:40px;overflow:hidden;text-align:center;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(255,255,255,.8);white-space:nowrap; }
.logo-visualizer-ios-app-grid .is-calendar{ color:#e54450; }
.logo-visualizer-ios-app-grid .is-photos{ background:conic-gradient(#f7c846,#ef5e51,#bc56cf,#5c75ec,#50bfe0,#63c56f,#f7c846);border:8px solid #fff; }
.logo-visualizer-ios-app-grid .is-camera{ background:linear-gradient(145deg,#e9e9ed,#8d8d95);color:#34343a; }
.logo-visualizer-ios-app-grid .is-maps{ background:linear-gradient(135deg,#d9f4e0 45%,#f5d682 46% 57%,#b7d8f6 58%);color:#1679db; }
.logo-visualizer-ios-app-grid .is-notes{ background:linear-gradient(#f4d84d 0 20%,#fff 20%); }
.logo-visualizer-ios-app-grid .is-podcast{ background:#a84ce5;color:#fff; }
.logo-visualizer-ios-app-grid .is-settings{ background:#83858d;color:#fff; }
.logo-visualizer-ios-app-focus b{ background:var(--viz-brand);padding:9px; }
.logo-visualizer-ios-app-focus img{ filter:none!important;height:100%;max-width:100%;width:100%; }
.logo-visualizer-app-zoom .logo-visualizer-ios-device{ transform:scale(1.8);transform-origin:43% 41%; }
.logo-visualizer-ios-pages{ bottom:31px;display:flex;gap:4px;justify-content:center;left:0;position:absolute;right:0;z-index:2; }
.logo-visualizer-ios-pages i{ background:rgba(36,32,42,.28);border-radius:50%;height:4px;width:4px; }
.logo-visualizer-ios-pages i:first-child{ background:#fff; }
.logo-visualizer-ios-home-bar{ background:rgba(20,18,23,.78);border-radius:999px;bottom:7px;height:4px;left:50%;position:absolute;transform:translateX(-50%);width:72px;z-index:4; }
.logo-visualizer-ios-date{ align-items:center;color:#fff;display:flex;flex-direction:column;margin-top:50px;position:relative;text-shadow:0 2px 12px rgba(23,23,28,.18);z-index:2; }
.logo-visualizer-ios-date span{ font-size:8px;font-weight:500; }
.logo-visualizer-ios-date strong{ font-size:48px;font-weight:300;line-height:1.1; }
.logo-visualizer-dock-island{ background:rgba(255,255,255,.52);border:1px solid rgba(255,255,255,.48);border-radius:14px;bottom:22px;display:grid;gap:7px;grid-template-columns:repeat(4,1fr);left:10px;padding:8px;position:absolute;right:10px;z-index:3; }
.logo-visualizer-dock-island > i{ align-items:center;background:#fff;border-radius:10px;display:flex;height:36px;justify-content:center;overflow:hidden; }
.logo-visualizer-dock-island > i > span{ color:#fff;font-size:15px; }
.logo-visualizer-dock-island .is-phone{ background:#54bd6d; }
.logo-visualizer-dock-island .is-message{ background:#4f9ff0; }
.logo-visualizer-dock-island .is-browser{ background:#fff; }
.logo-visualizer-dock-island .is-browser span{ color:#4b96e7; }
.logo-visualizer-dock-island .is-brand{ background:var(--viz-brand);padding:9px; }
.logo-visualizer-dock-island img{ filter:none!important;height:100%;max-width:100%;width:100%; }
.logo-visualizer-dock-zoom{ align-items:flex-end;padding-bottom:70px; }
.logo-visualizer-dock-zoom .logo-visualizer-ios-device{ transform:scale(1.8);transform-origin:center bottom; }

.logo-visualizer-scale-stage{ background:#fff;border:1px solid rgba(23,23,28,.08);border-radius:14px;min-height:430px;padding:26px 20px; }
.logo-visualizer-scale-row{ align-items:end;border-bottom:1px solid rgba(23,23,28,.07);display:grid;grid-template-columns:repeat(4,1fr);height:125px;padding-bottom:22px; }
.logo-visualizer-scale-row > span{ align-items:center;display:flex;flex-direction:column;gap:4px;justify-content:flex-end; }
.logo-visualizer-scale-row b{ align-items:center;display:flex;height:48px;justify-content:center;width:48px; }
.logo-visualizer-scale-row img{ height:var(--logo-size)!important;max-width:var(--logo-size)!important;width:var(--logo-size)!important; }
.logo-visualizer-scale-row small{ color:#9993a0;font-size:8px; }
.logo-visualizer-mono-cards{ display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:20px; }
.logo-visualizer-mono-cards > div{ align-items:center;border:1px solid rgba(23,23,28,.08);border-radius:12px;display:flex;flex-direction:column;gap:10px;height:210px;justify-content:center;padding:22px; }
.logo-visualizer-mono-cards > div img{ filter:brightness(0)!important;height:58px;max-width:74px; }
.logo-visualizer-mono-cards > div span{ color:#79737f;font-size:8px; }
.logo-visualizer-mono-cards > div:nth-child(2){ background:#16151a; }
.logo-visualizer-mono-cards > div:nth-child(2) img{ filter:brightness(0) invert(1)!important; }
.logo-visualizer-mono-cards > div:nth-child(2) span{ color:#aaa5b0; }

.logo-visualizer-background-matches{ display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.logo-visualizer-background-match{ align-items:center;aspect-ratio:1;border-radius:14px;display:flex;justify-content:center;overflow:hidden;padding:24px; }
.logo-visualizer-background-match-logo{ background:currentColor;display:block;height:24%;mask-position:center;mask-repeat:no-repeat;mask-size:contain;max-width:72%;width:230px;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain; }
.logo-visualizer-export-mask-image{ display:block;height:100%;object-fit:contain;width:100%; }
.logo-visualizer-matcher-empty{ align-self:center;color:#8d8795;font-size:13px;grid-column:1/-1;margin:auto;text-align:center; }

.logo-visualizer-email-stage{ background:#fff;border:1px solid rgba(23,23,28,.1);border-radius:14px;box-shadow:0 18px 44px -36px rgba(23,23,28,.65);display:flex;flex-direction:column;min-height:430px;overflow:hidden; }
.logo-visualizer-email-titlebar{ align-items:center;background:#fdfbff;border-bottom:1px solid rgba(23,23,28,.07);display:grid;grid-template-columns:1fr auto 1fr;height:44px;padding:0 14px; }
.logo-visualizer-email-titlebar > div{ display:flex;gap:6px; }
.logo-visualizer-email-titlebar > div i{ background:#c8c4cd;border-radius:50%;height:7px;width:7px; }
.logo-visualizer-email-titlebar > div i:first-child{ background:#ff6b5f; }
.logo-visualizer-email-titlebar > div i:nth-child(2){ background:#f6be4f; }
.logo-visualizer-email-titlebar > div i:nth-child(3){ background:#61c554; }
.logo-visualizer-email-titlebar strong{ color:#46414d;font-size:10px;font-weight:600; }
.logo-visualizer-email-titlebar > span{ color:#97919d;display:flex;font-size:8px;gap:12px;justify-content:flex-end; }
.logo-visualizer-email-field{ align-items:center;border-bottom:1px solid rgba(23,23,28,.07);display:flex;gap:9px;min-height:37px;padding:0 16px; }
.logo-visualizer-email-field span{ color:#9a94a1;font-size:9px; }
.logo-visualizer-email-field strong{ color:#58525e;font-size:9px;font-weight:400; }
.logo-visualizer-email-field button{ background:transparent;border:0;color:#8d8794;font-size:8px;margin-left:auto;padding:4px; }
.logo-visualizer-email-message{ flex:1;padding:28px 24px 18px; }
.logo-visualizer-email-message > p{ color:#6f6976;font-size:10px;line-height:1;margin:0 0 30px; }
.logo-visualizer-email-signature{ align-items:center;border-left:3px solid var(--viz-brand);display:flex;gap:18px;padding:10px 0 10px 18px; }
.logo-visualizer-email-signature img{ max-height:34px;max-width:115px; }
.logo-visualizer-email-signature > div{ border-left:1px solid rgba(23,23,28,.1);display:grid;gap:2px;padding-left:15px; }
.logo-visualizer-email-signature strong{ color:#29252e;font-size:11px;line-height:10px;font-weight:600; }
.logo-visualizer-email-signature span{ color:#89828f;font-size:8px;line-height:10px}
.logo-visualizer-email-signature small{ color:var(--viz-brand);font-size:8px;line-height:10px;margin-top:5px; }
.logo-visualizer-email-compose-toolbar{ align-items:center;border-top:1px solid rgba(23,23,28,.08);color:#807986;display:flex;font-size:10px;gap:14px;height:48px;padding:0 14px; }
.logo-visualizer-email-compose-toolbar button{ background:var(--viz-brand);border:0;border-radius:7px;color:var(--viz-on-brand);font-size:9px;height:28px;padding:0 13px; }
.logo-visualizer-email-compose-toolbar button i{ font-size:6px;margin-left:6px; }
.logo-visualizer-email-compose-toolbar > i:last-child{ margin-left:auto; }

.logo-visualizer-business-stage{ background:linear-gradient(145deg,#f0f0f2,#dddde1);border-radius:14px;min-height:430px;overflow:hidden;position:relative; }
.logo-visualizer-business-stage:before{ background:#fdfbff;content:"";inset:0;position:absolute; }
.logo-visualizer-business-card{ aspect-ratio:1.75;border-radius:8px;box-shadow:0 28px 45px -28px rgba(20,18,25,.65);display:flex;position:absolute;width:min(72%,330px); }
.logo-visualizer-business-front{ align-items:center;background:#fff;flex-direction:column;justify-content:center;left:7%;padding:32px;top:58px;transform:rotate(-5deg); }
.logo-visualizer-business-front img{ max-height:57px;max-width:220px; }
.logo-visualizer-business-back{ align-items:center;background:var(--viz-brand);bottom:55px;color:var(--viz-on-brand);gap:23px;justify-content:center;padding:30px;right:7%;transform:rotate(5deg); }
.logo-visualizer-business-back img{ filter:var(--viz-on-brand-filter)!important;max-height:45px;max-width:105px; }
.logo-visualizer-business-back > div{ border-left:1px solid color-mix(in srgb,var(--viz-on-brand) 35%,transparent);display:grid;gap:3px;padding-left:18px; }
.logo-visualizer-business-back strong{ font-size:11px;line-height:10px;font-weight:600; }
.logo-visualizer-business-back span,
.logo-visualizer-business-back small{ font-size:8px;line-height:10px;opacity:.76; }

.logo-visualizer-social-stage.is-exporting-mockup,
.logo-visualizer-ios-stage.is-exporting-mockup,
.logo-visualizer-business-stage.is-exporting-mockup{
    background:transparent !important;
}

.logo-visualizer-business-stage.is-exporting-mockup:before{
    display:none;
}

.logo-visualizer-marketing{
    display:grid;
    gap:104px;
    margin-top:80px;
}

.logo-visualizer-marketing-split{
    align-items:center;
    display:grid;
    gap:80px;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
}

.logo-visualizer-marketing-split h2,
.logo-visualizer-marketing-head h2{
    color:var(--viz-ink);
    font-size:36px;
    font-weight:600;
    letter-spacing:0;
    line-height:1.16;
    margin:0;
}

.logo-visualizer-marketing-split p,
.logo-visualizer-marketing-head p{
    color:var(--viz-copy);
    font-size:16px;
    font-weight:400;
    line-height:1.75;
    margin:20px 0 0;
}

.logo-visualizer-check-list{ display:grid;gap:10px; }
.logo-visualizer-check-list article{
    align-items:center;
    background:#fbfbfd;
    border:1px solid rgba(23,23,28,.07);
    border-radius:20px;
    display:flex;
    gap:15px;
    min-height:86px;
    padding:16px 18px;
}
.logo-visualizer-check-list i{ align-items:center;background:#eaf8f0;border-radius:50%;color:#198a4c;display:flex;flex:0 0 34px;font-size:12px;height:34px;justify-content:center; }
.logo-visualizer-check-list div{ display:grid;gap:4px; }
.logo-visualizer-check-list strong{ color:var(--viz-ink);font-size:14px;font-weight:500; }
.logo-visualizer-check-list span{ color:#87818f;font-size:13px;font-weight:400; }

.logo-visualizer-workflow{ display:grid;gap:32px; }
.logo-visualizer-marketing-head{ margin:0 auto;max-width:760px;text-align:center; }
.logo-visualizer-workflow-grid{ display:grid;gap:14px;grid-template-columns:repeat(3,1fr); }
.logo-visualizer-workflow-grid > *{
    background:#fff;
    border:1px solid rgba(23,23,28,.08);
    border-radius:20px;
    color:inherit;
    display:grid;
    min-height:160px;
    padding:25px;
    position:relative;
    text-decoration:none;
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.logo-visualizer-workflow-grid > a:hover{ border-color:rgba(107,57,244,.28);box-shadow:0 24px 55px -42px rgba(47,28,94,.55);text-decoration:none;transform:translateY(-3px); }
.logo-visualizer-workflow-grid > * > span{ color:var(--viz-brand);font-size:11px;font-weight:600; }
.logo-visualizer-workflow-grid strong{ align-self:end;color:var(--viz-ink);font-size:20px;font-weight:500; }
.logo-visualizer-workflow-grid p{ color:#827c89;font-size:13px;line-height:1.6;margin:8px 36px 0 0; }
.logo-visualizer-workflow-grid i{ bottom:25px;color:var(--viz-brand);position:absolute;right:25px; }
.logo-visualizer-workflow-grid article{ background:#f7f7ff;border-color:rgba(107,57,244,.18); }

.logo-visualizer-faq{ display:grid;gap:30px; }
.logo-visualizer-faq-list{ display:grid;gap:10px;margin:0 auto;max-width:900px;width:100%; }
.logo-visualizer-faq-list details{ background:#fbfbfd;border:1px solid rgba(23,23,28,.07);border-radius:18px;padding:0 20px; }
.logo-visualizer-faq-list summary{ color:var(--viz-ink);cursor:pointer;font-size:15px;font-weight:500;list-style:none;padding:20px 32px 20px 0;position:relative; }
.logo-visualizer-faq-list summary::-webkit-details-marker{ display:none; }
.logo-visualizer-faq-list summary:after{ color:var(--viz-brand);content:"+";font-size:22px;font-weight:300;position:absolute;right:2px;top:15px; }
.logo-visualizer-faq-list details[open] summary:after{ content:"-"; }
.logo-visualizer-faq-list p{ color:var(--viz-copy);font-size:14px;line-height:1.7;margin:-3px 0 20px;max-width:760px; }

.logo-visualizer-toast{
    background:#18171c;
    border-radius:999px;
    bottom:24px;
    box-shadow:0 18px 48px -24px rgba(0,0,0,.65);
    color:#fff;
    font-size:13px;
    left:50%;
    opacity:0;
    padding:12px 18px;
    pointer-events:none;
    position:fixed;
    transform:translate(-50%,12px);
    transition:opacity .2s ease,transform .2s ease;
    z-index:9999;
}
.logo-visualizer-toast.is-visible{ opacity:1;transform:translate(-50%,0); }

@media (max-width:1199px){
    .logo-visualizer-preview-browser{ grid-column:span 7; }
    .logo-visualizer-preview-social{ grid-column:span 5; }
    .logo-visualizer-preview-mobile,
    .logo-visualizer-preview-app,
    .logo-visualizer-preview-dock,
    .logo-visualizer-preview-scale,
    .logo-visualizer-preview-email,
    .logo-visualizer-preview-business{ grid-column:span 6; }
    .logo-visualizer-preview-matcher{ grid-column:1/-1; }
    .logo-visualizer-marketing-split{ gap:52px; }
}

@media (max-width:991px){
    .logo-visualizer-section{ padding:94px 0 105px; }
    .logo-visualizer-asset-grid{ grid-template-columns:1fr; }
    .logo-visualizer-asset{ align-items:center;display:grid;grid-template-columns:180px 1fr; }
    .logo-visualizer-asset-preview{ height:118px; }
    .logo-visualizer-asset-meta{ padding:0 8px 0 18px; }
    .logo-visualizer-preview-browser,
    .logo-visualizer-preview-social,
    .logo-visualizer-preview-google,
    .logo-visualizer-preview-website,
    .logo-visualizer-preview-mobile,
    .logo-visualizer-preview-app,
    .logo-visualizer-preview-dock,
    .logo-visualizer-preview-scale,
    .logo-visualizer-preview-email,
    .logo-visualizer-preview-business,
    .logo-visualizer-preview-matcher{ grid-column:1/-1; }
    .logo-visualizer-marketing{ gap:84px; }
    .logo-visualizer-marketing-split{ grid-template-columns:1fr; }
    .logo-visualizer-workflow-grid{ grid-template-columns:1fr; }
}

@media (max-width:767px){
    .logo-visualizer-section{ overflow-x:clip;padding:78px 0 88px; }
    .logo-visualizer-shell{ gap:28px; }
    .logo-visualizer-intro p{ font-size:15px; }
    .logo-visualizer-setup-panel,
    .logo-visualizer-results{ padding:18px; }
    .logo-visualizer-panel-head,
    .logo-visualizer-results-head{ display:grid;gap:16px; }
    .logo-visualizer-panel-head > div,
    .logo-visualizer-results-head > div{ min-width:0;width:100%; }
    .logo-visualizer-panel-head h2,
    .logo-visualizer-results-head h2{ font-size:23px; }
    .logo-visualizer-text-button{ justify-self:start; }
    .logo-visualizer-panel-actions{ align-items:flex-start;flex-wrap:wrap;justify-self:start; }
    .logo-visualizer-asset{ display:block; }
    .logo-visualizer-asset-preview{ height:145px; }
    .logo-visualizer-asset-meta{ padding:11px 4px 0 6px; }
    .logo-visualizer-asset-meta > div:first-child{ max-width:calc(100% - 78px); }
    .logo-visualizer-brand-row{ grid-template-columns:1fr; }
    .logo-visualizer-palette-add{ justify-self:start; }
    .logo-visualizer-results-actions{ align-items:flex-start;flex-direction:column; }
    .logo-visualizer-preview-grid{ gap:12px; }
    .logo-visualizer-preview-card{ padding:12px; }
    .logo-visualizer-preview-card > header{ align-items:flex-start; }
    .logo-visualizer-preview-card > header > div{ align-items:flex-start; }
    .logo-visualizer-preview-card > header h3{ font-size:13px; }
    .logo-visualizer-context-select select{ max-width:104px;width:104px; }
    .logo-visualizer-browser-window{ min-height:330px; }
    .logo-visualizer-browser-tab{ width:50%; }
    .logo-visualizer-browser-inspection{ gap:15px;padding:28px 20px; }
    .logo-visualizer-favicon-inspection{ flex-basis:88px;height:88px; }
    .logo-visualizer-favicon-inspection img{ height:52px;max-width:52px;width:52px; }
    .logo-visualizer-website-stage{ min-height:360px; }
    .logo-visualizer-website-stage nav{ height:68px;padding:0 18px; }
    .logo-visualizer-website-links{ display:none; }
    .logo-visualizer-website-stage nav button{ margin-left:auto; }
    .logo-visualizer-website-body{ grid-template-columns:1fr;min-height:292px;padding:38px 27px; }
    .logo-visualizer-website-body h4{ font-size:33px; }
    .logo-visualizer-website-art{ display:none; }
    .logo-visualizer-marketing-split h2,
    .logo-visualizer-marketing-head h2{ font-size:29px; }
    .logo-visualizer-marketing-split p,
    .logo-visualizer-marketing-head p{ font-size:15px; }
    .logo-visualizer-preview-card > footer{ align-items:flex-start;flex-wrap:wrap; }
}

@media (max-width:479px){
    .logo-visualizer-preview-card > header{ gap:8px; }
    .logo-visualizer-context-select select{ max-width:90px;width:90px; }
    .logo-visualizer-browser-bar{ gap:8px;padding:0 9px; }
    .logo-visualizer-browser-bar > i:nth-of-type(2){ display:none; }
    .logo-visualizer-browser-inspection{ align-items:flex-start;flex-direction:column; }
    .logo-visualizer-favicon-inspection{ flex-basis:88px;width:88px; }
    .logo-visualizer-social-profile{ gap:10px;grid-template-columns:52px minmax(0,1fr);padding-left:12px;padding-right:12px; }
    .logo-visualizer-social-avatar{ height:52px;padding:12px;width:52px; }
    .logo-visualizer-social-avatar{ --viz-appearance-inset:12px; }
    .logo-visualizer-social-bio{ padding-left:12px;padding-right:12px; }
    .logo-visualizer-social-frame > button{ margin-left:12px;margin-right:12px;width:calc(100% - 24px); }
    .logo-visualizer-social-frame > a{ margin-left:12px;margin-right:12px; }
    .logo-visualizer-google-stage{ min-height:350px;padding:25px 18px; }
    .logo-visualizer-google-tabs{ gap:16px;overflow:hidden; }
    .logo-visualizer-google-result h4{ font-size:17px; }
    .logo-visualizer-mono-cards{ grid-template-columns:1fr; }
    .logo-visualizer-mono-cards > div{ height:150px; }
    .logo-visualizer-scale-stage{ min-height:360px; }
    .logo-visualizer-email-signature{ align-items:flex-start;flex-direction:column; }
    .logo-visualizer-email-signature > div{ border-left:0;padding-left:0; }
    .logo-visualizer-background-matches{ grid-template-columns:1fr; }
    .logo-visualizer-social-stage{ height:360px;padding-left:8px;padding-right:8px; }
    .logo-visualizer-social-device{ transform:scale(1);width:100%; }
    .logo-visualizer-app-zoom .logo-visualizer-ios-device{ transform:scale(1.42); }
    .logo-visualizer-dock-zoom .logo-visualizer-ios-device{ transform:scale(1.42); }
    .logo-visualizer-business-card{ width:82%; }
    .logo-visualizer-business-front{ left:4%;top:68px; }
    .logo-visualizer-business-back{ bottom:62px;right:4%; }
    .logo-visualizer-email-compose-toolbar{ gap:10px; }
    .logo-visualizer-email-compose-toolbar > i:nth-of-type(4),
    .logo-visualizer-email-compose-toolbar > i:nth-of-type(5){ display:none; }
}

@media (prefers-reduced-motion:reduce){
    .logo-visualizer-section *,
    .logo-visualizer-section *:before,
    .logo-visualizer-section *:after{ scroll-behavior:auto!important;transition-duration:.01ms!important; }
}