@font-face{font-family:AppClash;src:url('/fonts/brand/ClashGrotesk-Regular.otf') format('opentype');font-weight:400;font-display:swap}
@font-face{font-family:AppClash;src:url('/fonts/brand/ClashGrotesk-Medium.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:AppClash;src:url('/fonts/brand/ClashGrotesk-Semibold.otf') format('opentype');font-weight:600 900;font-display:swap}
:root{--production-ink:#1e293b;--production-teal:#1a1a2e;--production-paper:#fbf8f1;--production-border:#e7decc;--primary-color:#1a1a2e;--secondary-color:#0891b2}
body{color:#334155;background:#fff;font-family:AppClash,'DM Sans',sans-serif}
h1,h2,h3,h4,h5{color:#1a1a2e;font-family:AppClash,'DM Sans',sans-serif;letter-spacing:-.025em}
#content .hero-section{background:#fbf8f1!important;border-bottom:1px solid #e7decc;padding-top:48px!important;padding-bottom:40px!important}
.hero-bg-decoration{display:none}
.hero-section .headline-main,.hero-section .headline-accent{background:none;-webkit-text-fill-color:currentColor;color:#1a1a2e}
.hero-section .hero-headline{font-weight:600;letter-spacing:-.045em}
.hero-section .hero-subheadline{color:#526174;font-size:17px;line-height:1.65}
.hero-section .highlight-text{color:#1a1a2e;font-weight:600}
.production-eyebrow,.production-secondary,.production-step-number,.production-handoff a{color:#1a1a2e}
.production-eyebrow{font-size:11px;font-weight:500;letter-spacing:.12em}
.hero-section .production-formats{color:#64748b;font-size:12px;letter-spacing:.09em}
.production-secondary{font-weight:500}
#upload-area.upload-area{background:linear-gradient(135deg,#fffdf8,#f5eddf);border:1px solid #e7decc;border-radius:16px;box-shadow:0 2px 5px #1e293b0a;min-height:252px;transition:background .2s,border-color .2s}
#upload-area.upload-area:hover,#upload-area.upload-area.dragging{background:#d8eefb;border-color:#0891b2;box-shadow:0 5px 14px #1e293b14;transform:none}
#upload-area .upload-icon i{color:#0891b2}
#upload-area .upload-link{color:#1a1a2e}
#upload-area .production-upload-title{color:#111;font-size:20px;font-weight:600}
#upload-area .upload-text{font-size:16px;color:#334155}
#upload-area .production-upload-note{color:#526174;font-size:12px}
#navbar.site-navigation{--primary-color:#1a1a2e;--primary-color-rgb:30,58,138;--secondary-color:#0891b2;--secondary-color-rgb:8,145,178;font-family:AppClash,'DM Sans',sans-serif}
#navbar.site-navigation .st-desktop-header{border-bottom:1px solid #e7decc}
#navbar.site-navigation #mainmenu a{font-size:14px;color:#334155}
#navbar.site-navigation #mainmenu a:hover{color:#1a1a2e}
#navbar.site-navigation .btn-main,#navbar .st-mobile-bar-cta,#navbar .st-mobile-drawer-cta{background:linear-gradient(115deg,#0891b2,#087d98)!important;color:#fff!important;border-radius:10px;font-weight:500;font-size:14px}
#navbar .st-new-badge{background:#e3f19b;color:#354125;border-radius:5px}
#navbar .st-mobile-trace-orders,#navbar .lang-menu a[aria-current="true"]{background:#fcf0f2;color:#098781;border-color:#e1d8f1}
.app-start-section{padding:40px 0;background:#fff}
.app-start-section .container{max-width:1184px;padding:0 32px}
.app-start-heading{display:flex;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.app-start-heading h2{font-size:24px;margin:0;font-weight:600}
.app-start-heading>span{font-size:13px;color:#64748b}
.app-start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app-start-card{display:flex;flex-direction:column;min-width:0;min-height:210px;padding:20px;border:1px solid;border-radius:16px;text-decoration:none!important;box-shadow:0 2px 5px #1e293b0a;transition:box-shadow .2s,transform .2s}
.app-start-card:hover{transform:translateY(-2px);box-shadow:0 5px 14px #1e293b14}
.app-start-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.app-start-icon{font-size:25px;line-height:1}
.app-start-tag{padding:4px 8px;border:1px solid;border-radius:20px;font-size:10px;line-height:1.4;white-space:nowrap}
.app-start-card h3{font-size:20px;font-weight:600;margin:0 0 8px}
.app-start-card p{font-size:14px;line-height:1.5;margin:0 0 16px;flex:1}
.app-start-note{font-size:11px;display:flex;justify-content:space-between;gap:8px}
.app-start-trace{background:#242b3d;border-color:#425365;color:#e0e4e7;box-shadow:0 6px 16px #203c451f}
.app-start-trace:hover{color:#e0e4e7}
.app-start-trace h3,.app-start-trace .app-start-icon{color:#fff}
.app-start-trace .app-start-icon{background:#48444d;border:1px solid #77737c;border-radius:10px;padding:5px 7px}
.app-start-trace .app-start-tag{color:#d9d5de;border-color:#68636e}
.app-start-trace .app-start-note{color:#b9c5c9}
.app-start-quick{background:linear-gradient(135deg,#fffdf8,#f5eddf);border-color:#e7decc;color:#253855}
.app-start-quick:hover{color:#253855}
.app-start-quick .app-start-icon{color:#1a1a2e}
.app-start-quick .app-start-tag{color:#075985;border-color:#91c8e7}
.app-start-generate{background:linear-gradient(135deg,#fffdf8,#fcf0f2);border-color:#eadfce;color:#443653}
.app-start-generate:hover{color:#443653}
.app-start-generate .app-start-icon,.app-start-generate .app-start-tag{color:#098781}
.app-start-generate .app-start-tag{border-color:#c5b2e7}
.production-workflow{background:#fbf8f1;padding:40px 0;border-top:1px solid #e7decc;border-bottom:1px solid #e7decc}
.production-workflow h2{font-weight:600}
.production-steps article{border-top-color:#d5dce8}
.production-steps h3{font-weight:600}
.production-steps p,.production-handoff p{color:#526174}
#content .color-separation-demo{background:#fff!important}
.separation-label{color:#64748b!important;letter-spacing:.04em}
.separation-box,.original-item .separation-box{border-color:#d7deea!important;box-shadow:none!important;border-radius:12px!important}
.separation-arrow{color:#94a3b8!important}
.badge.bg-primary-subtle{background:#fcf0f2!important;color:#098781!important;border-radius:6px}
.home-feature .small-border.bg-color-2{background:#0891b2!important}
.slider-line{background:#0891b2}.slider-button::before{color:#1a1a2e}
#content #trace-orders-promo{background:#f4effb!important;border-top:1px solid #e5daf3;border-bottom:1px solid #e5daf3}
#trace-orders-promo p:first-child{color:#098781!important}
#content a.btn-main{background:#242b3d!important;color:#fff!important;border-radius:10px;box-shadow:none;font-weight:500}
#content a.btn-main:hover{background:#1c2230!important}
#production-tools{background:#fbf8f1}
#production-tools .feature-box{border:1px solid #e7decc;border-radius:16px;background:#fff;box-shadow:0 2px 5px #1e293b0a}
#production-tools .i-boxed.bg-color-2{background:#1a1a2e!important}
.production-handoff{background:#fbf8f1;border-top:1px solid #e7decc}
#content #also-by-svgtrace{background:#fff!important}
a:focus-visible,.upload-link:focus-visible{outline:3px solid #098781;outline-offset:4px}
@media(max-width:800px){.app-start-grid{gap:12px}.app-start-card{padding:16px}.app-start-tag{font-size:9px}.app-start-heading>span{display:none}}
@media(max-width:650px){#content .hero-section{padding:28px 0!important}#upload-area.upload-area{min-height:208px}.app-start-section{padding:28px 0}.app-start-section .container{padding:0 24px}.app-start-grid{grid-template-columns:1fr}.app-start-card{min-height:180px}.app-start-heading h2{font-size:23px}.app-start-top{margin-bottom:18px}.production-workflow{padding:28px 0}}
@media(prefers-reduced-motion:reduce){.hero-section *,.separation-item,.app-start-card{animation:none!important;transition:none!important}}
/* Homepage treatment aligned with the approved checkout. */
#content .hero-section{background:#fbf8f1!important;border-bottom-color:#e7decc}
.hero-section .headline-main,.hero-section .headline-accent{color:#1a1a2e}
#upload-area.upload-area{background:#fffdf8;border-color:#e7decc;box-shadow:0 2px 5px #1a1a2e06}
#upload-area.upload-area:hover,#upload-area.upload-area.dragging{background:#f7f2e9;border-color:#098781}
#upload-area .upload-icon i{color:#098781}
#upload-area .upload-link{color:#2563eb}
#navbar.site-navigation .btn-main,#navbar .st-mobile-bar-cta,#navbar .st-mobile-drawer-cta{background:#2563eb!important}
.app-start-section{background:#fbf8f1}
.app-start-trace{background:radial-gradient(ellipse at 15% 10%,#203c45 0%,transparent 65%),linear-gradient(160deg,#242b3d,#1c2230);border-color:#425365}
.app-start-trace h3,.app-start-trace .app-start-icon{color:#fbf8f1}
.app-start-trace .app-start-icon{background:#ffffff14;border-color:#ffffff40}
.app-start-trace p{color:#e0e4e7}
.app-start-quick{background:#fffdf8;border-color:#e7decc;color:#334155}
.app-start-quick .app-start-icon{color:#098781}
.app-start-quick .app-start-tag{background:#edf6ef;border-color:#d4e5d7;color:#287148}
.app-start-generate{background:#fcf0f2;border-color:#eddae0;color:#334155}
.app-start-generate .app-start-icon,.app-start-generate .app-start-tag{color:#1a1a2e}
.app-start-generate .app-start-tag{border-color:#e6cdd6}
.production-workflow{background:#fffdf8;border-color:#e7decc}
#content .color-separation-demo{background:#fbf8f1!important}
#content #trace-orders-promo{background:#f4efe5!important;border-color:#e7decc}
#content #trace-orders-promo .btn-main,#content a.btn-main{background:#2563eb!important}
#content #trace-orders-promo .btn-main:hover,#content a.btn-main:hover{background:#1d4ed8!important}
#production-tools,.production-handoff{background:#fbf8f1}
#content #also-by-svgtrace{background:#fbf8f1!important}
/* Match the app checkout's font registration, weights and spacing. */
@font-face{font-family:'Clash Grotesk';src:url('/fonts/brand/ClashGrotesk-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('/fonts/brand/ClashGrotesk-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Grotesk';src:url('/fonts/brand/ClashGrotesk-Semibold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
body.trace-public-theme{--body-font:'Clash Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;--title-font:var(--body-font);font-family:var(--body-font)}
body.trace-public-theme :is(h1,h2,h3,h4,h5,h6){font-family:var(--title-font);font-weight:700;letter-spacing:-.3px}
body.trace-public-theme .hero-section .hero-headline{font-family:var(--title-font);font-weight:700;letter-spacing:-1px;line-height:1.12}
body.trace-public-theme :is(.hero-subheadline,.editing-intro>p:last-child,.home-feature p){font-weight:300;letter-spacing:normal;line-height:1.6}
body.trace-public-theme :is(.app-start-card h3,.editing-tool strong,#upload-area .production-upload-title){font-family:var(--title-font);font-weight:700;letter-spacing:-.3px}
body.trace-public-theme #navbar.site-navigation{font-family:var(--body-font)}
body.trace-public-theme :is(#content,#navbar.site-navigation,footer){--body-font:'Clash Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;--title-font:'Clash Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;font-family:'Clash Grotesk',-apple-system,BlinkMacSystemFont,sans-serif}
body.trace-public-theme :is(h1,h2,h3,h4,h5,h6),body.trace-public-theme .hero-section .hero-headline{font-family:'Clash Grotesk',-apple-system,BlinkMacSystemFont,sans-serif!important}
.hero-section .production-eyebrow{display:inline-flex;align-items:center;padding:8px 12px;margin:0 0 20px;border:1px solid #b5d8d0;border-radius:6px;background:#e3f1ec;color:#17665f;font-size:11px;font-weight:700;line-height:1.3;letter-spacing:.1em}

body.trace-public-theme .hero-section .production-value-headline{font-size:clamp(34px,3.3vw,50px);max-width:540px;text-wrap:balance}
.production-value-headline .headline-main,.production-value-headline .headline-accent{display:inline}
.hero-actions{display:flex;align-items:center;gap:24px;margin-top:24px}.hero-signup{display:inline-flex;align-items:center;justify-content:center;gap:36px;min-width:172px;padding:15px 24px;border-radius:8px;background:#2563eb;color:#fff!important;font-size:16px;font-weight:700;text-decoration:none!important;transition:background .2s}.hero-signup:hover{background:#1d4ed8}.hero-signup:focus-visible,.hero-pricing:focus-visible{outline:3px solid #098781;outline-offset:4px}.hero-pricing{font-size:14px;color:#475569;text-decoration:underline;text-underline-offset:4px}.hero-section .hero-subheadline{margin-bottom:24px!important}.hero-section .hero-artwork-demo{padding:0 0 0 20px;border:0;background:transparent;scroll-margin-top:24px}.hero-artwork-demo .customer-demo-wrap{max-width:480px;display:flex;flex-direction:column}.hero-artwork-demo .customer-demo-wrap h2{font-size:26px;line-height:1.2;margin:0 0 16px}.hero-artwork-demo .example-panels{order:1}.hero-artwork-demo .example-choices{order:2;margin:14px 0 0;gap:8px}.hero-artwork-demo .example-choice{padding:6px 10px}.hero-artwork-demo .example-choice img{width:40px;height:32px}.hero-artwork-demo .image-comparison{aspect-ratio:1.16}.hero-artwork-demo .example-layers{margin-top:12px}.hero-artwork-demo .example-layers>p{font-size:10px;margin-bottom:8px}.hero-artwork-demo .color-layer-grid{gap:8px}.hero-artwork-demo .layer-preview{aspect-ratio:auto;height:64px}.hero-artwork-demo .layer-preview img{padding:5px}.hero-artwork-demo .color-layer figcaption{font-size:10px;margin-top:5px;gap:4px}.hero-artwork-demo .color-layer small{font-size:8px}.hero-artwork-demo .gradient-caption{padding-top:18px;font-size:12px}.hero-artwork-demo .example-attribution{order:3;margin:12px 0 0;font-size:8px}.hero-artwork-demo .comparison-label{font-size:10px}@media(max-width:767px){.hero-actions{justify-content:center;margin-bottom:36px}.hero-section .hero-artwork-demo{padding:0}.hero-artwork-demo .customer-demo-wrap{max-width:480px}.hero-artwork-demo .customer-demo-wrap h2{font-size:24px}.hero-artwork-demo .image-comparison{aspect-ratio:1}.hero-artwork-demo .color-layer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Navigation has no icon-font or image-download dependency. */
#navbar.site-navigation :is(#mainmenu,.menu_side_area,.lang-summary,.st-new-badge){font-family:"Clash Grotesk",system-ui,sans-serif}
#navbar .st-desktop-header,#navbar .st-mobile-bar{opacity:1!important;visibility:visible!important;animation:none!important}
#navbar .st-inline-logo{max-width:200px;height:auto;vertical-align:middle}
#navbar .st-nav-icon{flex:none;display:inline-block;vertical-align:middle}
#navbar .st-mobile-drawer-logo .st-inline-logo{max-width:150px}

#navbar .st-mobile-bar-logo .st-inline-logo{height:48px;width:auto}
#navbar .st-mobile-drawer-logo .st-inline-logo{height:32px;width:auto}

#navbar #logo .logo-2.st-inline-logo{display:inline-block!important;width:200px;height:59px;opacity:1;visibility:visible}