.design-lab .floating-header{position:sticky;top:18px;z-index:20;max-width:1160px;width:calc(100% - 64px);margin:24px auto 28px;padding:13px 16px 13px 24px;gap:24px;border:1px solid #ffffff24;border-radius:22px;background:#292d2ce8;backdrop-filter:blur(24px);box-shadow:0 16px 48px #0003,inset 0 1px #ffffff09}
.design-lab .floating-header .brand img{width:132px}.design-lab .floating-header nav{margin:auto;gap:8px;align-items:center}.floating-header button,.floating-header .nav-link{border:0;background:none;color:#e9eaea;padding:12px 17px;border-radius:12px;font-size:14px;transition:background .2s,color .2s}.floating-header button:hover,.floating-header .nav-link:hover,.floating-header button[aria-expanded=true]{background:#ffffff0c;color:#ccd2ad}.explore-toggle span{display:inline-block;margin-left:8px;transition:transform .2s}.explore-toggle[aria-expanded=true] span{transform:rotate(180deg)}.nav-actions{display:flex;align-items:center;gap:22px;font-size:13px}.sign-in{color:#c1c7c2}.try-free{display:flex;align-items:center;gap:22px;background:#ccd2ad;color:#222526;padding:14px 20px;border-radius:13px;font-weight:600;box-shadow:inset 0 1px #ffffff60;transition:transform .2s,background .2s}.try-free:hover{transform:translateY(-2px);background:#dce3bc}.explore-panel{position:absolute;top:calc(100% + 12px);left:0;right:0;padding:26px;background:#282d2bf7;backdrop-filter:blur(30px);border:1px solid #ffffff26;border-radius:22px;box-shadow:0 30px 80px #0007;animation:menuIn .25s ease-out}.explore-panel[hidden]{display:none}.menu-heading{display:flex;justify-content:space-between;margin-bottom:22px;font-size:12px;color:#b8c1b7}.menu-heading span:first-child{letter-spacing:.14em;color:#ccd2ad;font-size:10px}.material-menu{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.material-menu>a{border:1px solid #ffffff17;border-radius:14px;overflow:hidden;background:#ffffff04;transition:transform .25s,border-color .25s}.material-menu>a:hover{transform:translateY(-5px);border-color:#ccd2ad88}.material-menu img{width:100%;height:175px;object-fit:cover;transition:transform .5s}.material-menu>a:hover img{transform:scale(1.035)}.material-menu a>div{display:flex;align-items:center;justify-content:space-between;padding:20px;font-size:20px;letter-spacing:-.025em}.material-menu small{display:block;margin-bottom:8px;color:#aebda5;letter-spacing:.12em;font-size:9px}.material-menu b{font-weight:400;color:#ccd2ad}.menu-footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff18;padding-top:21px;margin-top:24px;font-size:12px;color:#aeb8b0}.menu-footer a{color:#ccd2ad}.design-lab [id$="-detail"]{scroll-margin-top:125px}@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:760px){.design-lab .floating-header{width:calc(100% - 24px);top:10px;margin:12px auto;padding:12px;gap:10px;border-radius:17px;flex-wrap:wrap}.design-lab .floating-header .brand img{width:112px}.design-lab .floating-header nav{order:3;width:100%;justify-content:center;border-top:1px solid #ffffff13;padding-top:7px;margin:0}.design-lab .floating-header nav a{display:block}.nav-actions{margin-left:auto;gap:12px}.try-free{padding:11px 13px;gap:10px}.sign-in{font-size:12px}.explore-panel{padding:16px;max-height:calc(100dvh - 170px);overflow:auto}.menu-heading span:last-child{display:none}.material-menu{grid-template-columns:1fr;gap:10px}.material-menu>a{display:flex;align-items:center}.material-menu img{width:100px;height:90px}.material-menu a>div{flex:1;font-size:17px;padding:14px}.menu-footer{gap:15px;line-height:1.5}.floating-header button,.floating-header .nav-link{padding:10px 17px}.design-lab .hero{padding-top:0!important}}@media(prefers-reduced-motion:reduce){.floating-header *{animation:none!important;transition:none!important}}
.design-lab .floating-header .material-menu img{filter:none;width:100%;height:175px}@media(max-width:760px){.design-lab .floating-header .material-menu img{width:100px;height:90px}}
.design-lab .explore-panel{background:#282d2b}
.design-lab .floating-header .brand img{filter:none}

@font-face{font-family:Manrope;src:url('../assets/fonts/Manrope.ttf');font-weight:200 800;font-display:swap}

.design-lab .floating-header{display:flex;align-items:center;font-family:Manrope,Arial,sans-serif}
.design-lab .floating-header nav{display:flex;position:static;visibility:visible;opacity:1;transform:none;background:none;width:auto}
.design-lab .floating-header a{text-decoration:none}
.design-lab .floating-header button,.design-lab .nav-link,.design-lab .nav-actions{font-family:Manrope,Arial,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.025em}
.design-lab .brand img{display:block;height:auto}
.design-lab .material-menu a{color:#e9eaea}
.design-lab .conv-hero{position:relative;display:flex;align-items:center;width:100%;max-width:none;min-height:720px;padding:70px max(6vw,24px) 110px;margin:0;isolation:isolate;background:#222526;color:#fff}
.design-lab .conv-hero-image{position:absolute;inset:0;margin:0;z-index:-2;border-radius:0;overflow:hidden}
.design-lab .conv-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 55%;border-radius:0}
.design-lab .conv-hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,18,17,.9),rgba(12,18,17,.7) 32%,rgba(12,18,17,.08) 75%)}
.design-lab .conv-hero-copy{max-width:510px}
.design-lab .conv-hero h1{font-size:clamp(52px,6.5vw,94px);line-height:1.01;color:#fff}
.design-lab .conv-hero p,.design-lab .conv-hero .eyebrow{color:#e3e7e1}
.design-lab .conv-hero .conv-small{color:#d5dbd4}
.design-lab .conv-hero-image figcaption{position:absolute;bottom:16px;right:24px;max-width:450px;color:white;background:#222526b8;padding:10px 14px;font-size:11px;border-radius:6px}
.design-lab .conv-secondary{color:white}
@media(max-width:760px){.design-lab .floating-header nav{width:100%}.design-lab .conv-hero{min-height:760px;padding:45px 24px 130px;align-items:flex-start}.design-lab .conv-hero:before{background:linear-gradient(180deg,#101714e8,#101714a8 55%,#10171435)}.design-lab .conv-hero-image img{object-position:64% center}.design-lab .conv-hero-image figcaption{left:16px;right:16px;bottom:14px}.design-lab .conv-hero-copy{max-width:100%}.design-lab .conv-hero h1{font-size:60px}}
/* Header refinement: original brand typography and a more prominent logo. */
.design-lab .floating-header{font-family:Archivo,Arial,sans-serif}
.design-lab .floating-header .brand img{width:184px;height:auto}
.design-lab .floating-header button,.design-lab .floating-header .nav-link,.design-lab .floating-header .nav-actions{font-family:Archivo,Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:-.015em}
.design-lab .floating-header .try-free{font-weight:600}
@media(max-width:760px){.design-lab .floating-header .brand img{width:150px}.design-lab .floating-header button,.design-lab .floating-header .nav-link,.design-lab .floating-header .nav-actions{font-size:14px}.design-lab .floating-header .theme-toggle{display:none}}
/* Owner-selected main typeface: Archivo throughout the design lab. */
.design-lab,.design-lab :is(h1,h2,h3,h4,h5,h6,p,a,button,input,select,textarea,nav,summary,figcaption){font-family:Archivo,Arial,sans-serif}
/* More readable, generously spaced navigation labels. */
.design-lab .floating-header{gap:26px;padding-top:17px;padding-bottom:17px}
.design-lab .floating-header nav{gap:18px}
.design-lab .floating-header button,.design-lab .floating-header .nav-link,.design-lab .floating-header .nav-actions{font-size:18px;letter-spacing:.025em}
.design-lab .floating-header .nav-actions{gap:28px}
.design-lab .floating-header .nav-link,.design-lab .floating-header .explore-toggle{padding:13px 19px}
@media(max-width:1100px) and (min-width:761px){.design-lab .floating-header{gap:14px}.design-lab .floating-header nav{gap:10px}.design-lab .floating-header .nav-actions{gap:18px}.design-lab .floating-header .nav-link,.design-lab .floating-header .explore-toggle{padding:13px 12px}}
@media(max-width:760px){.design-lab .floating-header{gap:10px}.design-lab .floating-header nav{gap:22px}.design-lab .floating-header button,.design-lab .floating-header .nav-link{font-size:17px}.design-lab .floating-header .nav-actions{font-size:14px;gap:14px}.design-lab .floating-header .nav-link,.design-lab .floating-header .explore-toggle{padding:12px 10px}}
/* Owner refinement: a subtle one-pixel reduction, spacing retained. */
@media(min-width:761px){.design-lab .floating-header button,.design-lab .floating-header .nav-link,.design-lab .floating-header .nav-actions{font-size:17px}}
@media(max-width:760px){.design-lab .floating-header button,.design-lab .floating-header .nav-link{font-size:16px}}

/* Section-by-section refinement: preserve the existing content and structure. */
.design-lab .conversion-home h1{letter-spacing:-.045em;line-height:1.06}
.design-lab .conversion-home h2{letter-spacing:-.03em;line-height:1.16}
.design-lab .conversion-home h3{letter-spacing:-.018em;line-height:1.3}
.design-lab .conversion-home [id]{scroll-margin-top:145px}
.design-lab .material-tab{transition:background .18s,border-color .18s,box-shadow .18s}
.design-lab .material-tab[aria-selected=true]{background:#ccd2ad;color:#222526;border-color:#ccd2ad;box-shadow:0 4px 20px #00000012}
.design-lab .material-tab:hover{border-color:#929d83}
.design-lab .conv-detail-grid a{overflow:hidden;border-radius:12px}
.design-lab .conv-detail-grid img{transition:transform .35s}
.design-lab .conv-detail-grid a:hover img{transform:scale(1.025)}
.design-lab .conv-detail-grid h3{font-size:20px;margin-top:22px}
.design-lab .conv-detail-grid figcaption p{color:var(--muted)}
.design-lab .conv-steps span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;font-size:12px;margin-bottom:6px}
.design-lab .conv-pricing .pricing-grid article{padding:32px;border-radius:16px}
.design-lab .conv-pricing .pricing-grid article p{font-size:16px;line-height:1.65}
.design-lab .conv-pricing .pricing-grid button{font-size:15px;min-height:44px}
.design-lab .faq-list summary{font-size:19px;padding-block:22px}
.design-lab .faq-list p{line-height:1.75;max-width:65ch}
.design-lab .footer{gap:18px 28px;line-height:1.8;padding-block:32px}
@media(max-width:760px){.design-lab .conv-hero-copy{display:block}.design-lab .conv-hero{display:block;min-height:790px}.design-lab .conv-hero h1{font-size:54px;margin:22px 0}.design-lab .conv-hero-copy>.conv-actions{margin:24px 0}.design-lab .conv-hero-copy>.conv-small{margin-top:22px}.design-lab .conv-hero-copy>p:not(.eyebrow):not(.conv-lead):not(.conv-small){margin:18px 0}.design-lab .conv-hero-image{margin:0}.design-lab .conv-steps{grid-template-columns:1fr;gap:24px}.design-lab .conv-steps article{padding-top:18px}.design-lab .conv-steps h3{margin:10px 0}.design-lab .conversion-home [id]{scroll-margin-top:170px}}
@media(prefers-reduced-motion:reduce){.design-lab .material-tab,.design-lab .conv-detail-grid img{transition:none}.design-lab .conv-detail-grid a:hover img{transform:none}}

.design-lab .material-tab{justify-content:center;text-align:center;align-items:center}

/* Selected material capabilities: calm, non-interactive feature cards. */
.design-lab .material-summary{grid-template-columns:1.45fr 1fr;gap:48px;align-items:center}
.design-lab .material-summary .material-powers{display:grid;grid-template-columns:1fr;gap:10px;width:100%;margin:0;padding:0;justify-self:stretch}
.design-lab .material-powers li{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.005em}
.design-lab .material-powers svg{width:23px;height:23px;flex-shrink:0;color:var(--ink);opacity:.8}
@media(max-width:760px){.design-lab .material-summary{grid-template-columns:1fr;gap:20px}.design-lab .material-summary .material-powers{gap:8px;margin-bottom:8px}.design-lab .material-powers li{padding:13px 16px;font-size:15px}}

.design-lab .material-pair{grid-template-columns:1fr 1.25fr;gap:24px;align-items:start}
.design-lab .proof-image-label{font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:12px;color:var(--ink)}
.design-lab .proof-enlarge{display:block;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);cursor:zoom-in}
.design-lab .material-pair img{height:330px;aspect-ratio:auto;border-radius:0;object-fit:cover}
.design-lab .material-pair .material-input img{object-fit:contain;padding:12px}
.design-lab .proof-expand{position:absolute;right:12px;bottom:12px;padding:8px 12px;border:1px solid #ffffff30;border-radius:7px;color:#fff;background:#222526e8;font-size:12px;line-height:1.4}
.design-lab .proof-enlarge:hover{border-color:#929d83}
.design-lab .material-pair figcaption{color:var(--muted);line-height:1.6;margin-top:12px}
@media(max-width:760px){.design-lab .material-pair{grid-template-columns:1fr;gap:26px}.design-lab .material-pair img{height:auto;min-height:220px;max-height:none;aspect-ratio:1.46}.design-lab .material-pair .material-input img{max-height:none}}

/* Related proof pairs: equal visual weight, quieter frames and captions. */
.design-lab .material-pair{grid-template-columns:1fr 1fr;gap:22px;margin-top:32px}
.design-lab .material-pair figure{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.design-lab .proof-image-label{padding:16px 20px;margin:0;font-size:15px;font-weight:500}
.design-lab .proof-enlarge{border:0;border-radius:0;background:var(--panel)}
.design-lab .material-pair img{height:320px;object-fit:cover}
.design-lab .material-pair .material-input img{padding:0;object-fit:contain;background:#e9eaea}
.design-lab .proof-expand{width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;font-size:19px;border-radius:50%;right:12px;bottom:12px}
.design-lab .material-pair figcaption{margin:0;padding:15px 20px 18px;font-size:13px;line-height:1.55;min-height:68px}
@media(max-width:760px){.design-lab .material-pair{grid-template-columns:1fr;gap:18px}.design-lab .material-pair img{height:auto;min-height:0;aspect-ratio:1.5}.design-lab .material-pair figcaption{min-height:0}}

/* Four-step visual walkthrough. */
.design-lab .conv-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.design-lab .conv-steps article{padding:0 0 24px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.design-lab .step-visual{margin:0 0 18px}
.design-lab .step-enlarge{display:block;position:relative;cursor:zoom-in;background:#e9eaea}
.design-lab .step-visual img{display:block;width:100%;height:auto;aspect-ratio:1.86;object-fit:contain}
.design-lab .conv-steps article:last-child .step-visual img{object-fit:cover;object-position:center 45%}
.design-lab .step-visual figcaption{padding:10px 22px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5}
.design-lab .conv-steps article>span{margin:0 10px 0 22px;width:29px;height:29px;font-size:11px;vertical-align:middle}
.design-lab .conv-steps h3{display:inline;font-size:22px;vertical-align:middle;margin:0}
.design-lab .conv-steps article>p{margin:14px 22px 0;font-size:16px;line-height:1.65;max-width:48ch}
.design-lab .conv-steps .step-zoom{position:absolute;bottom:12px;right:12px;width:30px;height:30px;margin:0;display:flex;align-items:center;justify-content:center;border:1px solid #ffffff30;border-radius:50%;background:#222526e8;color:white;font-size:19px}
@media(max-width:760px){.design-lab .conv-steps{grid-template-columns:1fr;gap:20px}.design-lab .conv-steps h3{font-size:20px}.design-lab .conv-steps article{padding-top:0}}

.design-lab .workflow-stage{border:0;border-top:1px solid var(--line);margin-bottom:22px}
.design-lab .workflow-stage>summary{padding:23px 0;font-size:21px;font-weight:500;cursor:pointer;line-height:1.5}
.design-lab .workflow-stage .conv-steps{padding:8px 0 24px}
.design-lab .workflow-stage .conv-steps h3{display:block;margin:0 22px;font-size:22px}
.design-lab .workflow-stage .step-text-only{padding-top:26px;min-height:170px}
.design-lab .workflow-stage .conv-steps article:last-child .step-visual img{object-fit:contain}

.design-lab .workflow-type{font-size:36px!important;margin:64px 0 22px;padding-top:24px;border-top:2px solid #ccd2ad;letter-spacing:-.025em}.design-lab .workflow-type:first-child{margin-top:0}
.design-lab .workflow-stage .conv-steps{align-items:start}