@import url("./preview-surface.css");
/* Shared Keepze header and lockup: customer, Studio, demo and 3D pages. */
@font-face{font-family:'Keepze Brand';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/hanken-grotesk.woff2') format('woff2')}
:root{--keepze-header-height:92px}
header.keepze-header,header.keepze-header.site-header,header.keepze-header.studio-bar{box-sizing:border-box;position:sticky;top:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:none;height:var(--keepze-header-height);min-height:var(--keepze-header-height);margin:0;padding:14px clamp(20px,5vw,76px);border:0;border-bottom:1px solid #e4d9c2;background:#f6f1e7;color:#1c2733;font-family:'Keepze Brand',system-ui,sans-serif}
.keepze-header .keepze-brand{box-sizing:border-box;display:grid;grid-template-columns:42px max-content;grid-template-rows:auto auto;align-items:center;gap:4px 10px;flex:none;width:max-content;min-height:52px;margin:0;padding:0;border:0;color:#1c2733;text-decoration:none;letter-spacing:normal;white-space:nowrap;font-family:'Keepze Brand',system-ui,sans-serif}
.keepze-header .keepze-feather{display:block;grid-column:1;grid-row:1 / span 2;align-self:center;width:42px;height:50px;max-width:none;object-fit:contain;margin:0;padding:0;transform:none;animation:none;filter:none}
.keepze-header .keepze-name{display:block;grid-column:2;grid-row:1;font:700 36px/.98 'Keepze Brand',system-ui,sans-serif;letter-spacing:-.065em;text-transform:none;margin:0;color:#1c2733}
.keepze-header .keepze-tagline{display:block;grid-column:2;grid-row:2;font:500 11.5px/1.25 'Keepze Brand',system-ui,sans-serif;letter-spacing:.025em;text-transform:none;margin:0;color:#58636c}
.keepze-header .hdr-right,.keepze-header .studio-actions{display:flex;align-items:center;gap:16px;margin:0}
.keepze-header nav{font:500 16px/1.4 'Keepze Brand',system-ui,sans-serif;gap:26px;margin:0}
.keepze-header .keepze-header-link,.keepze-header .keepze-header-caption{font:600 15px/1.4 'Keepze Brand',system-ui,sans-serif;letter-spacing:normal;max-width:190px}
.keepze-header .keepze-header-link{display:inline-flex;align-items:center;min-height:44px;color:#1c2733;text-decoration:none}
.keepze-header a:focus-visible,.keepze-header button:focus-visible{outline:2px solid #a06c2c;outline-offset:5px}
.keepze-header nav#site-nav .text-button{text-decoration:none}
.keepze-header nav#site-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:#a06c2c;text-decoration-thickness:1px;text-underline-offset:6px}
.keepze-header .menu-btn{display:none;min-height:44px;min-width:44px;margin:0}
.keepze-header .quiet-link,.keepze-header .cart-btn{min-height:44px}
header.keepze-header--viewer{position:fixed;inset:0 0 auto}
#tag.keepze-brand{position:static;inset:auto;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;padding:0}
@media(max-width:1000px) and (min-width:701px){.keepze-header nav{gap:18px;font-size:15px}.keepze-header .hdr-right{gap:12px}}
@media(max-width:700px){
:root{--keepze-header-height:80px}
/* Keep mobile site navigation in the document scroll flow, including after browser toolbar resizing. */
header.keepze-header.site-header{position:relative;top:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
header.keepze-header,header.keepze-header.site-header,header.keepze-header.studio-bar{padding:12px 16px;gap:8px}
.keepze-header .keepze-brand{grid-template-columns:36px max-content;column-gap:9px;row-gap:4px;min-height:49px}
.keepze-header .keepze-feather{width:36px;height:44px}
.keepze-header .keepze-name{font-size:32px}
.keepze-header .keepze-tagline{font-size:11px;letter-spacing:.015em}
.keepze-header .hdr-right,.keepze-header .studio-actions{gap:6px}
.keepze-header .menu-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px;font:600 13px/1 'Keepze Brand',system-ui,sans-serif}
.keepze-header .cart-btn{display:grid;place-items:center;width:44px;height:44px;padding:0}
.keepze-header .cart-label{display:none}.keepze-header #cart-count{margin:0}
.keepze-header nav#site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#f6f1e7;border-bottom:1px solid #e4d9c2;padding:6px 16px 14px;z-index:81;box-shadow:0 18px 30px -22px #1c2733aa}
.keepze-header nav#site-nav.open{display:flex}
.keepze-header nav#site-nav a,.keepze-header nav#site-nav .text-button{display:block;padding:14px 0;border-bottom:1px solid #e4d9c2;font-size:16px;text-decoration:none;text-align:left;min-height:44px}
.keepze-header nav#site-nav a[aria-current=page]{text-decoration:none;color:#764c1c;font-weight:700}
.keepze-header .keepze-header-link{font-size:14px}.keepze-header .keepze-header-caption{font-size:12px;max-width:110px;text-align:right}
}
@media(max-width:359px){.keepze-header .menu-label{display:none}.keepze-header .menu-btn{width:44px;padding:0}.keepze-header .keepze-header-caption{max-width:85px;font-size:11px}}

@media(max-width:430px){
.keepze-header .studio-actions:has(#studio-back) #studio-back{flex:none;width:44px;height:44px;min-width:44px;padding:0;font-size:0}
.keepze-header .studio-actions:has(#studio-back) #studio-back::before{content:"←";font:600 18px/1 'Keepze Brand',system-ui,sans-serif}
.keepze-header .studio-actions:has(#studio-back) .exit-link{flex:none;width:60px;height:44px;padding:6px 3px;font-size:13px;line-height:1.15;white-space:normal;text-align:center}
}

/* Write the reserved catchphrase from its first letter through its last period. */
.keepze-header .keepze-writing{position:relative;grid-column:2;grid-row:2;display:block;width:max-content;font:500 11.5px/1.25 'Keepze Brand',system-ui,sans-serif;--quill-home-x:-52px;--quill-home-bottom:1.32px}
.keepze-header.keepze-header--home .keepze-tagline{animation:keepze-write-words 2.5s linear .1s 1 both}
.keepze-header.keepze-header--home .keepze-feather{animation:keepze-rest-quill 2.5s linear .1s 1 both}
.keepze-header .keepze-pen{position:absolute;left:0;bottom:2px;width:42px;height:50px;z-index:2;pointer-events:none;display:none}
.keepze-header.keepze-header--home .keepze-pen{display:block;animation:keepze-write-path 2.5s linear .1s 1 both}
.keepze-header .keepze-writing-feather{display:block;width:100%;height:100%;object-fit:contain;transform-origin:0 100%}
.keepze-header.keepze-header--home .keepze-writing-feather{animation:keepze-write-strokes 2.5s ease-in-out .1s 1 both}
@keyframes keepze-write-words{0%,10%{clip-path:inset(0 100% 0 0)}74%,100%{clip-path:inset(0 0 0 0)}}
@keyframes keepze-write-path{0%,5%{left:var(--quill-home-x);bottom:var(--quill-home-bottom);opacity:1}10%{left:0;bottom:2px;opacity:1}74%,77%{left:100%;bottom:2px;opacity:1}93%,99.9%{left:var(--quill-home-x);bottom:var(--quill-home-bottom);opacity:1}100%{left:var(--quill-home-x);bottom:var(--quill-home-bottom);opacity:0}}
/* Lift and settle between strokes while the horizontal tip tracks the reveal. */
@keyframes keepze-write-strokes{
0%,5%,93%,100%{transform:translateY(0) rotate(0)}
10%,74%,77%{transform:translateY(0) rotate(-20deg)}
14%,38%,54%{transform:translateY(-8px) rotate(-12deg)}
22%,46%,62%,70%{transform:translateY(-6px) rotate(-14deg)}
30%{transform:translateY(-7px) rotate(-12deg)}
18%,26%,34%,42%,50%,58%,66%{transform:translateY(2px) rotate(-28deg)}
}
@keyframes keepze-rest-quill{0%,4.8%{opacity:1}5.12%,97.28%{opacity:0}97.6%,100%{opacity:1}}
.intro-running .keepze-brand .keepze-tagline,.intro-running .keepze-brand .keepze-pen,.intro-running .keepze-brand .keepze-writing-feather,.intro-running .keepze-brand .keepze-feather{animation-play-state:paused}
@media(max-width:700px){.keepze-header .keepze-writing{font-size:11px;--quill-home-x:-45px;--quill-home-bottom:2.55px}.keepze-header .keepze-pen{width:36px;height:44px}}
/* Keep the existing homepage writing under Reduce motion, with one iteration only. */
@media(prefers-reduced-motion:reduce){.keepze-header.keepze-header--home .keepze-tagline{animation:keepze-write-words 2.5s linear .1s 1 both!important}.keepze-header.keepze-header--home .keepze-feather{animation:keepze-rest-quill 2.5s linear .1s 1 both!important}.keepze-header.keepze-header--home .keepze-pen{animation:keepze-write-path 2.5s linear .1s 1 both!important}.keepze-header.keepze-header--home .keepze-writing-feather{animation:keepze-write-strokes 2.5s ease-in-out .1s 1 both!important}.intro-running .keepze-brand .keepze-tagline,.intro-running .keepze-brand .keepze-pen,.intro-running .keepze-brand .keepze-writing-feather,.intro-running .keepze-brand .keepze-feather{animation-play-state:paused!important}}