:root{
  --paper:#f3eee4;
  --ink:#202521;
  --subtle:#5b625a;
  --moss:#596447;
  --rust:#ab4326;
  --line:#d5d0c6;
  --cream:#fcf8ef;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Be Vietnam Pro",sans-serif;
  --max:1240px
}
img{
  height:auto
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.75
}
body:has(dialog[open]){
  overflow:hidden
}
a{
  color:inherit;
  text-decoration:none
}
button,input,select{
  font:inherit
}
button,a,select{
  touch-action:manipulation
}
button{
  cursor:pointer
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--rust);
  outline-offset:5px
}
button{
  color:inherit
}
img{
  max-width:100%;
  display:block
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.04em;
  line-height:1.04
}
h3{
  font-weight:600;
  line-height:1.35
}
em{
  font-weight:400;
  color:var(--rust)
}
[hidden]{
  display:none!important
}
.wrap{
  max-width:var(--max);
  margin-inline:auto;
  width:calc(100% - 96px)
}
.skip{
  position:absolute;
  z-index:10;
  background:var(--ink);
  color:var(--cream);
  padding:12px;
  top:-100px;
  left:20px
}
.skip:focus{
  top:12px
}
.preview-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  padding:7px 24px;
  background:var(--ink);
  color:var(--cream);
  font-size:10px;
  letter-spacing:.05em
}
.preview-bar nav{
  display:flex;
  gap:20px
}
.preview-bar a{
  opacity:.8
}
.preview-bar [aria-current]{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:4px
}
.header{
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  border-bottom:1px solid var(--line)
}
.brand{
  display:flex;
  gap:15px;
  align-items:center
}
.brand-mark{
  font-family:var(--serif);
  font-weight:500;
  font-size:50px;
  letter-spacing:-.1em;
  line-height:1
}
.brand-dot{
  color:var(--rust)
}
.brand-name{
  font-size:9px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.14em;
  border-left:1px solid var(--line);
  padding-left:15px
}
.main-nav{
  display:flex;
  align-items:center;
  gap:32px;
  font-size:12px;
  font-weight:500
}
.main-nav a:hover,.text-link:hover,.footer a:hover{
  color:var(--rust)
}
.nav-contact{
  border-bottom:1px solid var(--ink);
  padding:8px 0
}
.menu-toggle{
  display:none;
  background:none;
  border:0
}
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
  padding-block:58px 54px
}
.eyebrow{
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1.5;
  margin-bottom:20px
}
.line{
  display:inline-block;
  width:24px;
  height:1px;
  background:currentColor;
  vertical-align:middle;
  margin-right:12px
}
.hero h1{
  font-size:clamp(56px,5.9vw,85px);
  margin-bottom:24px
}
.hero-intro{
  font-size:14px;
  max-width:430px;
  color:var(--subtle);
  line-height:1.9;
  margin-bottom:26px
}
.actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:50px;
  padding:12px 22px;
  font-size:11px;
  font-weight:600;
  border:1px solid transparent;
  line-height:1.5;
  transition:background .2s,color .2s
}
.primary{
  background:var(--rust);
  color:var(--cream)
}
.primary:hover{
  background:#86341e
}
.dark{
  background:var(--ink);
  color:var(--cream)
}
.dark:hover{
  background:var(--moss)
}
.cream{
  background:var(--paper);
  color:var(--ink)
}
.text-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:500;
  font-size:11px;
  line-height:1.7;
  border-bottom:1px solid currentColor;
  padding-bottom:4px
}
.hero-note{
  font-size:10px;
  line-height:1.9;
  color:var(--subtle);
  margin:30px 0 0
}
.hero-art{
  position:relative;
  isolation:isolate;
  background:#dce0d0;
  min-height:530px;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden
}
.hero-art-top{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.13em;
  font-weight:500;
  padding:27px 30px;
  z-index:1
}
.hero-ring{
  position:absolute;
  border:1px solid #a8b095;
  border-radius:50%;
  width:420px;
  height:420px;
  top:50%;
  left:50%;
  transform:translate(-50%,-53%);
  z-index:-1
}
.hero-ring:before,.hero-ring:after{
  content:"";
  position:absolute;
  border:1px solid #b6bda7;
  border-radius:50%;
  inset:24px
}
.hero-ring:after{
  inset:48px
}
.hero-word{
  position:absolute;
  left:26px;
  top:38px;
  font-family:var(--serif);
  font-size:130px;
  letter-spacing:-.08em;
  color:#c0c7ad;
  z-index:-1
}
.keyboard-image{
  width:100%;
  height:310px;
  object-fit:contain;
  mix-blend-mode:multiply;
  transform:rotate(-7deg) scale(1.07);
  padding:20px
}
.hero-art figcaption{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 30px;
  font-size:11px;
  line-height:1.8
}
.hero-art figcaption strong{
  font-weight:500
}
.hero-art figcaption a{
  background:var(--ink);
  color:var(--cream);
  width:44px;
  height:44px;
  display:grid;
  place-content:center;
  font-size:20px
}
.finder{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:0 30px;
  padding-block:30px;
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--line)
}
.finder .eyebrow{
  font-size:9px;
  margin-bottom:10px
}
.finder h2{
  font-size:29px;
  margin-bottom:12px
}
.finder form{
  display:flex;
  align-items:end;
  gap:12px
}
.field{
  flex:1;
  min-width:0
}
.field label{
  display:block;
  font-size:10px;
  margin-bottom:6px;
  color:var(--subtle)
}
.field select{
  width:100%;
  border:1px solid var(--line);
  background:transparent;
  min-height:50px;
  padding:10px 28px 10px 12px;
  font-size:12px;
  color:var(--ink);
  border-radius:0
}
.finder-result{
  grid-column:2;
  font-size:10px;
  color:var(--subtle);
  margin:12px 0 0
}
.finder-result a{
  text-decoration:underline
}
.section{
  padding-block:78px
}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:32px
}
.section-heading h2{
  font-size:50px;
  margin-bottom:0
}
.section-heading .eyebrow{
  margin-bottom:14px
}
.section-heading>.text-link{
  margin-bottom:8px
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px
}
.product-card{
  min-width:0
}
.product-image{
  display:block;
  position:relative;
  background:#e3dfd5;
  padding:36px 38px 26px;
  overflow:hidden;
  aspect-ratio:1.06
}
.product-label{
  position:absolute;
  top:14px;
  left:18px;
  font-size:8px;
  letter-spacing:.1em;
  color:var(--ink);
  font-weight:600
}
.product-image img{
  width:100%;
  height:100%;
  object-fit:contain;
  box-shadow:7px 13px 22px #2025211a;
  transition:transform .25s
}
.product-image:hover img{
  transform:translateY(-4px)
}
.product-image-s1{
  background:#e2dfd4
}
.product-image-kbt{
  background:#deddd1
}
.product-image-sx{
  background:#e5d9cf
}
.image-arrow{
  position:absolute;
  right:15px;
  bottom:13px;
  width:34px;
  height:34px;
  background:var(--paper);
  display:grid;
  place-content:center
}
.product-meta{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:9px;
  letter-spacing:.06em;
  margin:18px 0 10px;
  color:var(--subtle)
}
.product-meta span:last-child{
  color:var(--ink);
  font-weight:600
}
.product-card h3{
  font-family:var(--serif);
  font-size:28px;
  font-weight:500;
  margin-bottom:10px;
  letter-spacing:-.025em
}
.product-card>p{
  font-size:11px;
  color:var(--subtle);
  margin-bottom:14px
}
.product-card .compatibility{
  font-size:10px;
  color:var(--ink);
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-bottom:16px
}
.catalog-note{
  font-size:10px;
  color:var(--subtle);
  margin:26px 0 0
}
.brand-links{
  display:flex;
  border-block:1px solid var(--line);
  margin-top:32px
}
.brand-links a{
  flex:1;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  padding:18px 24px;
  border-right:1px solid var(--line);
  font-family:var(--serif);
  font-size:26px
}
.brand-links a:first-child{
  padding-left:0
}
.brand-links a:last-child{
  border-right:0
}
.brand-links a span{
  font:10px var(--sans);
  color:var(--subtle)
}
.brand-links a:hover{
  color:var(--rust)
}
.listening{
  background:var(--ink);
  color:var(--paper);
  padding-block:64px
}
.listening-inner{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  align-items:center
}
.listening h2{
  font-size:60px;
  margin-bottom:24px
}
.listening em{
  color:#d5a98b
}
.listening-copy>p:not(.eyebrow){
  max-width:330px;
  font-size:12px;
  color:#c4c9c0;
  line-height:1.9
}
.listening .text-link{
  margin-top:18px
}
.video-cover{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  padding:0;
  border:0;
  overflow:hidden;
  background:#121713;
  color:var(--cream)
}
.video-cover img{
  width:100%;
  height:100%;
  object-fit:cover
}
.video-cover:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 50%,#101510b3)
}
.large-play{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--paper);
  color:var(--ink);
  display:grid;
  place-content:center;
  font-size:18px;
  z-index:1
}
.video-cover-label{
  position:absolute;
  bottom:16px;
  left:22px;
  font-size:11px;
  z-index:1
}
.demo-caption{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:20px 0;
  border-bottom:1px solid #ffffff26
}
.demo-caption .eyebrow{
  font-size:8px;
  color:#b8bfaf
}
.demo-caption h3{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  margin:8px 0 0
}
.demo-caption>span{
  font-size:10px;
  white-space:nowrap;
  padding-top:2px
}
.demo-list button{
  display:flex;
  gap:20px;
  align-items:center;
  width:100%;
  background:none;
  color:var(--paper);
  border:0;
  border-bottom:1px solid #ffffff26;
  text-align:left;
  padding:15px 0;
  font-size:11px
}
.demo-list button span{
  font-size:9px;
  color:#b8bfaf
}
.demo-list button span:last-child{
  margin-left:auto;
  font-size:17px
}
.heading-note{
  font-size:11px;
  color:var(--subtle);
  margin:0 0 5px;
  line-height:1.9
}
.tool-feature{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  background:#e8e2d6;
  min-height:330px;
  overflow:hidden
}
.tool-copy{
  padding:42px
}
.tool-copy h3{
  font-family:var(--serif);
  font-size:40px;
  font-weight:400;
  letter-spacing:-.03em;
  margin-bottom:18px
}
.tool-copy>p{
  font-size:12px;
  line-height:1.9;
  color:var(--subtle)
}
.tool-note{
  display:block;
  font-size:9px;
  margin-top:12px;
  color:var(--subtle)
}
.tool-screen{
  align-self:center;
  padding:32px 0 32px 10px
}
.tool-screen img{
  width:105%;
  max-width:none;
  box-shadow:0 18px 30px #20252126
}
.tool-secondary{
  display:flex;
  align-items:center;
  gap:28px;
  border-bottom:1px solid var(--line);
  padding:24px 0
}
.tool-secondary>.eyebrow{
  margin:0;
  font-size:9px;
  width:130px
}
.tool-secondary>strong{
  font-family:var(--serif);
  font-size:28px;
  font-weight:500
}
.tool-secondary>span:not(.eyebrow){
  font-size:11px;
  color:var(--subtle)
}
.tool-secondary>span:last-child{
  margin-left:auto;
  font-size:24px;
  color:var(--ink)
}
.approach{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  padding-block:30px 80px
}
.approach h2{
  font-size:49px
}
.approach-statement>p:not(.eyebrow){
  font-size:12px;
  line-height:1.95;
  max-width:390px;
  color:var(--subtle)
}
.approach .text-link{
  margin-top:14px
}
.approach-steps{
  list-style:none;
  padding:0;
  margin:0
}
.approach-steps li{
  display:flex;
  gap:24px;
  padding:20px 0;
  border-top:1px solid var(--line)
}
.approach-steps li>span{
  font-family:var(--serif);
  font-size:30px;
  color:var(--rust);
  line-height:1.4
}
.approach-steps h3{
  font-size:14px;
  margin:4px 0 8px
}
.approach-steps p{
  font-size:11px;
  line-height:1.9;
  color:var(--subtle);
  margin-bottom:0
}
.contact-banner{
  background:var(--moss);
  color:var(--cream);
  padding-block:54px
}
.contact-banner h2{
  font-size:48px;
  max-width:750px;
  margin-bottom:28px
}
.contact-banner em{
  color:#e2cfb7
}
.contact-email{
  display:block;
  font-size:11px;
  margin-top:17px;
  text-decoration:underline;
  text-underline-offset:4px;
  overflow-wrap:anywhere
}
.footer{
  padding-block:36px;
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  align-items:center
}
.footer>.brand .brand-mark{
  font-size:38px
}
.footer .brand-name{
  font-size:8px
}
.footer p{
  font-family:var(--serif);
  font-style:italic;
  font-size:20px;
  margin:0
}
.footer nav{
  display:flex;
  gap:24px;
  margin-left:auto;
  font-size:10px
}
.copyright{
  font-size:9px;
  width:100%;
  border-top:1px solid var(--line);
  padding-top:18px;
  color:var(--subtle)
}
dialog{
  background:var(--paper);
  color:var(--ink);
  width:min(880px,calc(100% - 32px));
  padding:24px;
  border:0;
  max-height:90vh;
  overflow:auto
}
dialog::backdrop{
  background:#101812dc
}
.dialog-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.dialog-top .eyebrow{
  margin:0
}
.dialog-top button{
  background:transparent;
  border:0;
  min-height:44px;
  font-size:12px
}
dialog h2{
  font-size:32px;
  margin:18px 0
}
dialog>p{
  font-size:11px;
  margin:16px 0 0
}
dialog>p a{
  text-decoration:underline
}
.video-stage{
  aspect-ratio:16/9;
  background:var(--ink)
}
.video-stage iframe{
  width:100%;
  height:100%;
  display:block;
  border:0
}
.breadcrumb{
  font-size:10px;
  color:var(--subtle);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding-block:22px
}
.breadcrumb a{
  text-decoration:underline;
  text-underline-offset:3px
}
.product-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  padding-block:12px 55px
}
.product-art{
  background:#deded1;
  margin:0;
  padding:30px;
  position:relative;
  align-self:start
}
.product-art>.eyebrow{
  margin-bottom:25px;
  font-size:9px
}
.product-art img{
  width:100%;
  max-height:520px;
  object-fit:contain;
  box-shadow:0 20px 30px #20252122
}
.product-art figcaption{
  font-size:10px;
  color:var(--subtle);
  margin-top:22px;
  display:flex;
  justify-content:space-between
}
.product-summary h1{
  font-size:67px;
  margin-bottom:17px
}
.product-summary>.eyebrow{
  margin-bottom:16px
}
.product-lead{
  font-size:13px;
  line-height:1.9;
  color:var(--subtle);
  margin-bottom:20px
}
.price-line{
  display:flex;
  align-items:baseline;
  gap:16px;
  margin-bottom:20px
}
.price-line strong{
  font-family:var(--serif);
  font-size:42px;
  font-weight:500;
  line-height:1
}
.price-line span{
  font-size:10px;
  color:var(--subtle)
}
.product-facts{
  border-block:1px solid var(--line);
  margin:0 0 22px;
  font-size:11px
}
.product-facts div{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:13px 0
}
.product-facts div:last-child{
  border:0
}
.product-facts dt{
  color:var(--subtle)
}
.product-facts dd{
  margin:0
}
.product-delivery{
  font-size:11px;
  border-left:2px solid var(--rust);
  padding-left:15px;
  margin-bottom:24px;
  line-height:1.9
}
.product-summary .button{
  width:100%;
  min-height:54px;
  font-size:12px
}
.product-summary .purchase-note{
  font-size:10px;
  color:var(--subtle);
  margin:10px 0 18px
}
.product-summary .text-link{
  font-size:11px
}
.product-subnav{
  border-block:1px solid var(--line);
  display:flex;
  gap:34px;
  padding:17px 0;
  font-size:11px;
  flex-wrap:wrap
}
.product-subnav a:hover{
  color:var(--rust)
}
.product-content{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:65px;
  padding-block:55px
}
.side-note .eyebrow{
  margin-bottom:12px
}
.side-note h2{
  font-size:32px
}
.side-note p{
  font-size:11px;
  color:var(--subtle);
  line-height:1.9
}
.content-main h2{
  font-size:38px;
  margin-bottom:20px
}
.content-main p{
  font-size:12px;
  line-height:2;
  color:var(--subtle);
  max-width:790px
}
.content-main .feature-list{
  list-style:none;
  margin:25px 0 35px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 30px
}
.feature-list li{
  padding:13px 0;
  border-top:1px solid var(--line);
  font-size:12px
}
.feature-list span{
  display:block;
  font-size:10px;
  color:var(--subtle);
  margin-top:5px
}
.delivery-steps{
  counter-reset:delivery;
  list-style:none;
  padding:0;
  margin:25px 0 0
}
.delivery-steps li{
  display:flex;
  gap:20px;
  border-top:1px solid var(--line);
  padding:20px 0
}
.delivery-steps li:before{
  counter-increment:delivery;
  content:"0" counter(delivery);
  font:26px var(--serif);
  color:var(--rust)
}
.delivery-steps h3{
  font-size:13px;
  margin-bottom:6px
}
.delivery-steps p{
  margin:0
}
.delivery-steps a{
  text-decoration:underline;
  overflow-wrap:anywhere
}
.product-videos{
  padding-block:56px;
  background:#e8e3d9
}
.product-videos .section-heading{
  align-items:start
}
.product-videos .section-heading h2{
  font-size:47px
}
.video-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px 24px
}
.video-entry h3{
  font-family:var(--serif);
  font-size:25px;
  font-weight:400;
  margin:14px 0 5px
}
.video-entry>a{
  font-size:10px;
  color:var(--subtle);
  text-decoration:underline
}
.video-grid .large-play{
  width:45px;
  height:45px;
  font-size:14px
}
.video-tag{
  font-size:9px;
  color:var(--subtle);
  display:block;
  margin-top:12px
}
.library-details{
  margin-top:36px;
  border-top:1px solid var(--line)
}
.library-details>summary{
  padding:20px 0;
  font-size:13px;
  font-weight:500;
  cursor:pointer
}
.library-details .video-grid{
  padding-bottom:18px
}
.shorts-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px
}
.shorts-list a{
  border:1px solid var(--line);
  padding:10px 12px;
  font-size:10px
}
.shorts-list a:hover{
  background:var(--paper)
}
.faq-section{
  padding-block:58px;
  display:grid;
  grid-template-columns:.6fr 1fr;
  gap:80px
}
.faq-section h2{
  font-size:44px
}
.faq-section details{
  border-top:1px solid var(--line)
}
.faq-section summary{
  cursor:pointer;
  padding:20px 0;
  font-weight:500;
  font-size:12px
}
.faq-section details p{
  font-size:12px;
  color:var(--subtle);
  line-height:1.9
}
.contact-block{
  border-top:1px solid var(--line);
  padding-block:36px 54px
}
.contact-block h2{
  font-size:28px
}
.contact-block p{
  font-size:12px;
  margin-bottom:10px;
  overflow-wrap:anywhere
}
.contact-block a{
  text-decoration:underline
}
.legacy-copy{
  border-top:1px solid var(--line);
  padding-block:38px
}
.legacy-copy summary{
  font-size:13px;
  cursor:pointer;
  font-weight:600
}
.legacy-copy h3{
  font-size:14px;
  margin-top:24px
}
.legacy-copy p{
  font-size:12px;
  color:var(--subtle);
  line-height:2
}
@keyframes rise{
  from{
    opacity:0;
    transform:translateY(14px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}
.hero-copy{
  animation:rise .55s both
}
.hero-art{
  animation:rise .7s .12s both
}
@media(min-width:1600px){
  :root{
    --max:1360px
  }
  .hero h1{
    font-size:92px
  }
  .hero-art{
    min-height:570px
  }
  .keyboard-image{
    height:360px
  }
}
@media(max-width:1100px){
  .wrap{
    width:calc(100% - 64px)
  }
  .main-nav{
    gap:22px
  }
  .hero{
    gap:32px
  }
  .hero h1{
    font-size:66px
  }
  .hero-art{
    min-height:485px
  }
  .hero-intro{
    font-size:13px
  }
  .finder{
    grid-template-columns:.8fr 1.2fr;
    gap:25px
  }
  .finder form{
    flex-wrap:wrap
  }
  .finder form .button{
    flex-basis:100%
  }
  .finder-result{
    grid-column:1/-1;
    margin:0
  }
  .listening-inner{
    gap:45px
  }
  .listening h2{
    font-size:51px
  }
  .product-image{
    padding:35px 26px 24px
  }
  .tool-copy{
    padding:30px
  }
  .tool-copy h3{
    font-size:33px
  }
  .approach{
    gap:55px
  }
  .product-hero{
    gap:40px
  }
  .product-summary h1{
    font-size:56px
  }
  .product-content{
    grid-template-columns:200px 1fr;
    gap:45px
  }
}
@media(max-width:800px){
  .preview-bar{
    justify-content:space-between;
    gap:12px;
    font-size:9px
  }
  .preview-bar>span{
    max-width:210px
  }
  .preview-bar nav{
    gap:12px
  }
  .wrap{
    width:calc(100% - 40px)
  }
  .header{
    min-height:88px;
    position:relative;
    gap:16px
  }
  .brand-mark{
    font-size:42px
  }
  .brand-name{
    font-size:8px
  }
  .menu-toggle{
    display:flex;
    gap:14px;
    align-items:center;
    min-height:44px;
    font-size:12px;
    padding:8px 0 8px 12px
  }
  .main-nav{
    display:none;
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    z-index:5;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:var(--paper);
    padding:12px 20px;
    box-shadow:0 14px 20px #20252112;
    border-bottom:1px solid var(--line)
  }
  .main-nav.is-open{
    display:flex
  }
  .main-nav a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:8px 0
  }
  .nav-contact{
    border:0
  }
  .hero{
    gap:24px;
    padding-top:40px
  }
  .hero h1{
    font-size:54px
  }
  .hero .eyebrow{
    font-size:9px
  }
  .hero-intro{
    font-size:12px
  }
  .hero .actions{
    gap:15px
  }
  .hero .text-link{
    font-size:10px
  }
  .hero-art{
    min-height:445px
  }
  .hero-ring{
    width:300px;
    height:300px
  }
  .hero-word{
    font-size:90px
  }
  .hero-art-top{
    padding:22px;
    font-size:8px
  }
  .keyboard-image{
    height:270px
  }
  .hero-art figcaption{
    padding:22px;
    font-size:9px
  }
  .hero-note{
    font-size:9px
  }
  .finder{
    grid-template-columns:1fr;
    gap:16px
  }
  .finder-result{
    grid-column:auto
  }
  .finder form{
    flex-wrap:nowrap
  }
  .finder form .button{
    flex-basis:auto;
    padding-inline:17px
  }
  .section{
    padding-block:55px
  }
  .section-heading h2{
    font-size:42px
  }
  .section-heading>.text-link{
    font-size:10px;
    max-width:180px
  }
  .product-grid{
    gap:20px
  }
  .product-image{
    padding:35px 18px 22px
  }
  .product-label{
    font-size:7px;
    left:12px
  }
  .product-card h3{
    font-size:25px
  }
  .product-card>p{
    font-size:10px
  }
  .product-card .compatibility{
    font-size:9px
  }
  .product-meta{
    flex-wrap:wrap;
    font-size:8px
  }
  .listening-inner{
    grid-template-columns:1fr 1.4fr;
    gap:30px
  }
  .listening h2{
    font-size:42px
  }
  .listening-copy>p:not(.eyebrow){
    font-size:11px
  }
  .demo-caption h3{
    font-size:22px
  }
  .tool-feature{
    grid-template-columns:1fr 1.2fr
  }
  .tool-copy{
    padding:26px
  }
  .tool-copy .button{
    font-size:10px;
    padding:12px 16px
  }
  .tool-copy>p{
    font-size:11px
  }
  .heading-note{
    max-width:240px;
    font-size:10px
  }
  .tool-secondary{
    gap:16px
  }
  .tool-secondary>.eyebrow{
    width:auto;
    font-size:8px
  }
  .tool-secondary>strong{
    font-size:25px
  }
  .tool-secondary>span:not(.eyebrow){
    font-size:10px
  }
  .approach{
    gap:40px;
    padding-bottom:55px
  }
  .approach h2{
    font-size:39px
  }
  .contact-banner h2{
    font-size:39px
  }
  .footer nav{
    margin-left:0
  }
  .product-hero{
    gap:28px
  }
  .product-art{
    padding:22px
  }
  .product-summary h1{
    font-size:48px
  }
  .product-facts div{
    grid-template-columns:95px 1fr;
    gap:12px
  }
  .product-lead{
    font-size:12px
  }
  .product-content{
    grid-template-columns:160px 1fr;
    gap:30px
  }
  .video-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .faq-section{
    gap:40px
  }
  .product-videos .section-heading h2{
    font-size:40px
  }
  .product-subnav{
    gap:22px
  }
  .contact-block h2{
    font-size:27px
  }
}
@media(max-width:600px){
  .preview-bar{
    padding:9px 16px;
    align-items:start;
    line-height:1.5
  }
  .preview-bar>span{
    max-width:155px;
    font-size:8px
  }
  .preview-bar nav{
    gap:10px;
    font-size:9px;
    padding-top:2px
  }
  .wrap{
    width:calc(100% - 36px)
  }
  .hero{
    grid-template-columns:1fr;
    padding-block:36px 30px;
    gap:30px
  }
  .hero h1{
    font-size:62px;
    margin-bottom:20px;
    line-height:1.02
  }
  .hero h1 br:nth-of-type(2){
    display:none
  }
  .hero-intro{
    font-size:13px;
    max-width:100%;
    margin-bottom:24px
  }
  .hero .eyebrow{
    font-size:9px;
    margin-bottom:17px
  }
  .hero .actions{
    gap:20px
  }
  .hero .button{
    min-height:49px;
    padding-inline:18px;
    font-size:11px
  }
  .hero .text-link{
    font-size:10px;
    max-width:170px
  }
  .hero-note{
    font-size:10px;
    margin-top:22px
  }
  .hero-art{
    min-height:355px
  }
  .hero-art-top{
    padding:20px
  }
  .hero-word{
    font-size:115px;
    top:20px;
    left:16px
  }
  .hero-ring{
    width:285px;
    height:285px
  }
  .keyboard-image{
    height:230px;
    padding:20px 12px
  }
  .hero-art figcaption{
    padding:15px 20px;
    font-size:10px
  }
  .hero-art figcaption a{
    width:40px;
    height:40px
  }
  .finder{
    padding-block:25px
  }
  .finder h2{
    font-size:29px
  }
  .finder form{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:12px
  }
  .finder form .button{
    grid-column:1/-1
  }
  .field select{
    font-size:16px;
    padding-left:10px
  }
  .field label{
    font-size:11px
  }
  .finder-result{
    font-size:11px;
    line-height:1.9
  }
  .section-heading{
    display:block;
    margin-bottom:25px
  }
  .section-heading h2{
    font-size:44px
  }
  .section-heading>.text-link{
    margin-top:20px;
    max-width:none;
    font-size:11px
  }
  .section .eyebrow{
    font-size:9px
  }
  .product-grid{
    grid-template-columns:1fr;
    gap:35px
  }
  .product-image{
    aspect-ratio:1.16;
    padding:36px 52px 26px
  }
  .product-label{
    font-size:9px;
    left:18px
  }
  .product-card h3{
    font-size:32px
  }
  .product-meta{
    font-size:10px;
    margin-top:18px
  }
  .product-card>p{
    font-size:12px;
    max-width:95%
  }
  .product-card .compatibility{
    font-size:10px
  }
  .product-card .text-link{
    font-size:12px
  }
  .catalog-note{
    font-size:10px
  }
  .brand-links{
    flex-direction:column;
    margin-top:25px
  }
  .brand-links a,.brand-links a:first-child{
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:13px 0;
    font-size:28px
  }
  .brand-links a:last-child{
    border-bottom:0
  }
  .brand-links a span{
    font-size:11px
  }
  .brand-links a span:first-child{
    margin-right:auto;
    max-width:30px
  }
  .brand-links a span:last-child{
    margin-left:auto
  }
  .listening{
    padding-block:44px
  }
  .listening-inner{
    grid-template-columns:1fr;
    gap:25px
  }
  .listening h2{
    font-size:51px
  }
  .listening-copy>p:not(.eyebrow){
    font-size:12px;
    max-width:100%
  }
  .listening .text-link{
    margin-top:8px
  }
  .demo-caption h3{
    font-size:25px
  }
  .demo-list button{
    font-size:12px;
    min-height:48px
  }
  .tool-feature{
    grid-template-columns:1fr
  }
  .tool-copy{
    padding:28px
  }
  .tool-copy h3{
    font-size:36px
  }
  .tool-copy>p{
    font-size:12px
  }
  .tool-copy .button{
    font-size:11px
  }
  .tool-note{
    font-size:10px
  }
  .tool-screen{
    padding:0 28px 28px
  }
  .tool-screen img{
    width:100%;
    max-width:100%
  }
  .heading-note{
    max-width:100%;
    font-size:11px;
    margin-top:18px
  }
  .tool-secondary{
    display:grid;
    grid-template-columns:1fr auto;
    gap:7px 16px;
    padding-block:22px
  }
  .tool-secondary>.eyebrow{
    grid-column:1;
    font-size:9px
  }
  .tool-secondary>strong{
    grid-column:1;
    font-size:28px
  }
  .tool-secondary>span:not(.eyebrow){
    grid-column:1;
    font-size:11px
  }
  .tool-secondary>span:last-child{
    grid-column:2;
    grid-row:1/4;
    font-size:24px
  }
  .approach{
    grid-template-columns:1fr;
    gap:25px;
    padding-top:0
  }
  .approach h2{
    font-size:42px
  }
  .approach-statement>p:not(.eyebrow){
    font-size:12px
  }
  .approach-steps h3{
    font-size:14px
  }
  .approach-steps p{
    font-size:12px
  }
  .contact-banner{
    padding-block:40px
  }
  .contact-banner h2{
    font-size:37px;
    line-height:1.1
  }
  .contact-banner .button{
    font-size:11px;
    padding-inline:18px
  }
  .contact-email{
    font-size:11px
  }
  .footer{
    gap:22px
  }
  .footer>p{
    font-size:19px
  }
  .footer nav{
    width:100%;
    justify-content:space-between;
    gap:12px;
    font-size:11px
  }
  .copyright{
    font-size:10px
  }
  dialog{
    padding:18px
  }
  dialog h2{
    font-size:27px;
    line-height:1.15
  }
  dialog>p{
    font-size:12px
  }
  dialog>p a{
    display:block;
    margin-top:8px
  }
  .breadcrumb{
    font-size:10px;
    gap:8px
  }
  .product-hero{
    grid-template-columns:1fr;
    gap:30px;
    padding-bottom:35px
  }
  .product-art{
    padding:22px;
    max-width:430px;
    width:100%;
    margin-inline:auto
  }
  .product-art img{
    max-height:340px
  }
  .product-art>.eyebrow{
    margin-bottom:18px
  }
  .product-art figcaption{
    font-size:9px;
    margin-top:16px
  }
  .product-summary h1{
    font-size:60px
  }
  .product-lead{
    font-size:13px
  }
  .price-line strong{
    font-size:40px
  }
  .price-line span{
    font-size:11px
  }
  .product-facts{
    font-size:12px
  }
  .product-facts div{
    grid-template-columns:105px 1fr
  }
  .product-delivery{
    font-size:12px
  }
  .product-summary .purchase-note{
    font-size:11px
  }
  .product-subnav{
    gap:10px 20px;
    font-size:11px
  }
  .product-subnav a{
    padding-block:6px
  }
  .product-content{
    grid-template-columns:1fr;
    gap:20px;
    padding-block:36px
  }
  .side-note h2{
    font-size:34px;
    margin-bottom:14px
  }
  .side-note p{
    font-size:12px
  }
  .content-main h2{
    font-size:35px
  }
  .content-main p{
    font-size:12px;
    line-height:1.95
  }
  .content-main .feature-list{
    gap:10px 18px;
    margin-top:20px
  }
  .feature-list li{
    font-size:12px
  }
  .feature-list span{
    font-size:11px
  }
  .product-videos{
    padding-block:36px
  }
  .product-videos .section-heading h2{
    font-size:41px
  }
  .video-grid{
    grid-template-columns:1fr;
    gap:28px
  }
  .video-entry h3{
    font-size:27px
  }
  .video-entry>a{
    font-size:11px
  }
  .video-tag{
    font-size:10px
  }
  .library-details>summary{
    font-size:12px
  }
  .shorts-list a{
    font-size:11px
  }
  .faq-section{
    grid-template-columns:1fr;
    gap:15px;
    padding-block:40px
  }
  .faq-section h2{
    font-size:41px
  }
  .faq-section summary{
    font-size:12px
  }
  .contact-block p{
    font-size:12px
  }
  .delivery-steps h3{
    font-size:13px
  }
  .legacy-copy p{
    font-size:12px
  }
}
@media(max-width:360px){
  .wrap{
    width:calc(100% - 28px)
  }
  .preview-bar{
    padding-inline:14px;
    gap:8px
  }
  .preview-bar>span{
    max-width:132px
  }
  .preview-bar nav{
    font-size:8px;
    gap:8px
  }
  .hero h1{
    font-size:55px
  }
  .hero .actions{
    gap:14px
  }
  .hero .text-link{
    font-size:10px;
    max-width:135px
  }
  .hero .button{
    font-size:10px;
    padding-inline:14px
  }
  .hero-art{
    min-height:320px
  }
  .keyboard-image{
    height:205px
  }
  .hero-word{
    font-size:100px
  }
  .hero-ring{
    width:255px;
    height:255px
  }
  .product-image{
    padding-inline:38px
  }
  .contact-banner .button{
    font-size:10px;
    padding-inline:15px
  }
  .product-summary h1{
    font-size:53px
  }
  .brand-name{
    padding-left:12px
  }
  .brand{
    gap:12px
  }
  .contact-banner h2{
    font-size:33px
  }
  .product-facts div{
    grid-template-columns:90px 1fr
  }
  .brand-links a{
    min-height:50px
  }
}
.product-card>p,.content-main p,.legacy-copy p,.faq-section details p,.delivery-steps p{
  font-size:14px
}
.product-lead,.product-delivery{
  font-size:14px
}
.tool-copy>p,.approach-statement>p:not(.eyebrow),.approach-steps p{
  font-size:13px
}
@media(max-width:600px){
  .hero h1{
    font-size:clamp(40px,12.7vw,50px);
    line-height:1.06
  }
  .hero h1 br:nth-of-type(2){
    display:initial
  }
  .product-summary h1{
    font-size:clamp(42px,12.5vw,49px)
  }
  .product-art img{
    max-height:285px
  }
}
.catalog-hero{
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:70px;
  padding-block:30px 54px;
  align-items:end
}
.catalog-hero h1{
  font-size:82px;
  margin-bottom:20px
}
.catalog-hero>div>p:last-child{
  max-width:490px;
  color:var(--subtle)
}
.catalog-intro{
  border-left:1px solid var(--line);
  padding:10px 0 8px 36px
}
.catalog-intro>p{
  font-family:var(--serif);
  font-size:28px;
  line-height:1.2;
  margin:17px 0
}
.catalog-intro small{
  font-size:10px;
  color:var(--subtle)
}
.catalog-brand-labels{
  display:flex;
  gap:17px;
  font-size:11px;
  margin-bottom:17px
}
.catalog-layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:38px;
  padding-block:28px 65px;
  border-block:1px solid var(--line)
}
.catalog-filters{
  position:sticky;
  top:24px;
  align-self:start;
  min-width:0
}
.filter-heading{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:15px;
  margin-bottom:24px
}
.filter-heading h2{
  font-size:28px;
  margin:0
}
.reset-link{
  border:0;
  background:none;
  padding:10px 0;
  text-decoration:underline;
  text-underline-offset:4px;
  color:var(--subtle);
  font-size:11px;
  min-height:44px
}
.catalog-field{
  margin-bottom:22px;
  min-width:0
}
.catalog-field label{
  display:block;
  font-size:10px;
  font-weight:600;
  margin-bottom:8px;
  letter-spacing:.03em
}
.catalog-field select,.catalog-field input{
  width:100%;
  min-width:0;
  background:transparent;
  border:1px solid var(--line);
  border-radius:0;
  color:var(--ink);
  min-height:48px;
  padding:10px;
  font-size:12px
}
.search-control{
  display:flex;
  min-width:0
}
.search-control input{
  border-right:0
}
.search-control button{
  background:var(--ink);
  color:var(--cream);
  width:44px;
  flex-shrink:0;
  border:0
}
.filter-note{
  font-size:10px;
  line-height:1.9;
  color:var(--subtle)
}
.catalog-refinements>.text-link{
  font-size:10px;
  line-height:1.7;
  margin-top:8px
}
.catalog-refinements>summary{
  display:none
}
.catalog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:48px;
  margin-bottom:22px
}
.catalog-toolbar>p{
  margin:0;
  font-size:11px;
  color:var(--subtle);
  overflow-wrap:anywhere
}
.catalog-sort{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:10px;
  flex-shrink:0
}
.catalog-sort select{
  min-height:44px;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  background:transparent;
  max-width:170px;
  padding:6px;
  font-size:11px
}
.active-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px
}
.filter-chip{
  border:1px solid var(--line);
  background:#e7e3d8;
  padding:8px 12px;
  min-height:44px;
  max-width:100%;
  font-size:10px;
  text-align:left;
  overflow-wrap:anywhere
}
.catalog-grid{
  gap:34px 22px
}
.catalog-grid .product-image{
  padding:38px 22px 24px
}
.catalog-grid .product-card h3{
  font-size:25px
}
.catalog-grid .product-meta{
  font-size:9px
}
.catalog-grid .product-card>p{
  font-size:11px;
  line-height:1.9
}
.catalog-grid .text-link{
  font-size:10px
}
.catalog-grid .compatibility{
  min-height:70px
}
.product-image-v19,.product-image-ea7{
  background:#e4ded2
}
.product-image-studio,.product-image-pa5x{
  background:#dadfd7
}
.catalog-empty{
  padding:45px 30px;
  border-block:1px solid var(--line);
  background:repeating-linear-gradient(135deg,transparent,transparent 8px,#d5d0c630 8px,#d5d0c630 9px)
}
.catalog-empty h2{
  font-size:42px;
  margin-bottom:16px
}
.catalog-empty p{
  max-width:450px;
  color:var(--subtle)
}
.catalog-empty .button{
  margin-right:20px;
  margin-top:10px
}
.catalog-empty .text-link{
  margin-top:20px;
  font-size:11px
}
.catalog-guidance{
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:46px;
  padding-block:55px
}
.catalog-guidance h2{
  font-size:40px;
  margin-bottom:0
}
.catalog-guidance h3{
  font-size:14px;
  margin:33px 0 10px
}
.catalog-guidance p{
  color:var(--subtle);
  font-size:12px
}
.template-switch{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:18px;
  border-bottom:1px solid var(--line)
}
.template-switch>.eyebrow{
  font-size:9px;
  margin:0
}
.template-switch>div{
  display:flex;
  align-items:center;
  gap:15px;
  font-size:10px
}
.template-switch select{
  border:1px solid var(--line);
  min-height:44px;
  background:transparent;
  color:var(--ink);
  max-width:270px;
  padding:8px;
  font-size:11px
}
.template-hero .price-line{
  flex-wrap:wrap;
  row-gap:10px
}
.template-hero .price-line strong{
  font-size:39px
}
.product-option>p{
  margin:8px 0 0;
  font-size:10px;
  color:var(--subtle)
}
.product-preview-note{
  padding-block:35px;
  border-block:1px solid var(--line)
}
.product-preview-note>p{
  font-size:11px;
  color:var(--subtle);
  max-width:650px
}
#template-error p,#template-no-demos{
  color:var(--subtle)
}
@media(max-width:1100px){
  .catalog-layout{grid-template-columns:200px minmax(0,1fr);gap:28px}
  .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-hero{gap:35px}
  .catalog-hero h1{font-size:70px}
}
@media(max-width:800px){
  .catalog-hero{grid-template-columns:1.5fr 1fr;gap:25px}
  .catalog-hero h1{font-size:55px}
  .catalog-intro{padding-left:22px}
  .catalog-intro>p{font-size:23px}
  .catalog-layout{grid-template-columns:1fr}
  .catalog-filters{position:static;border-bottom:1px solid var(--line);padding-bottom:24px}
  .refinement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
  .filter-heading{margin-bottom:14px}
  .catalog-filters .filter-note{margin-bottom:0}
  .catalog-guidance{gap:26px}
  .catalog-guidance h2{font-size:30px}
  .template-switch{gap:16px;align-items:start}
  .template-switch>div{flex-direction:column;align-items:start;gap:5px}
  .template-switch select{max-width:240px}
}
@media(max-width:600px){
  .preview-bar{gap:8px;flex-wrap:wrap;justify-content:space-between}
  .preview-bar>span{max-width:135px}
  .preview-bar nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .catalog-hero{grid-template-columns:1fr;padding-block:28px 30px;gap:24px}
  .catalog-hero h1{font-size:48px}
  .catalog-hero>div>p:last-child{font-size:13px;margin-bottom:0}
  .catalog-intro{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}
  .catalog-intro>p{display:none}
  .catalog-brand-labels{gap:24px;margin-block:12px}
  .catalog-layout{padding-top:24px;gap:22px}
  .refinement-grid{grid-template-columns:1fr;padding-top:15px}
  .catalog-refinements>summary{display:list-item;font-size:12px;min-height:44px;padding:10px 0;cursor:pointer}
  .catalog-field input,.catalog-field select,.catalog-sort select,.template-switch select{font-size:16px}
  .catalog-toolbar{align-items:start;flex-direction:column;gap:10px}
  .catalog-sort{width:100%;justify-content:space-between}
  .catalog-sort select{max-width:200px}
  .catalog-grid{grid-template-columns:1fr;gap:32px}
  .catalog-grid .product-card h3{font-size:31px}
  .catalog-grid .product-image{padding:38px 32px 24px;aspect-ratio:1.12}
  .catalog-grid .compatibility{min-height:0}
  .catalog-grid .product-meta{font-size:10px}
  .catalog-grid .product-card>p{font-size:12px}
  .catalog-grid .text-link{font-size:11px}
  .catalog-guidance{grid-template-columns:1fr;gap:10px;padding-block:36px}
  .catalog-guidance h2{font-size:37px}
  .catalog-guidance h3{margin-top:18px}
  .catalog-guidance p{margin-bottom:0}
  .catalog-empty{padding:30px 18px}
  .catalog-empty h2{font-size:34px}
  .template-switch{flex-direction:column;gap:10px}
  .template-switch>div{width:100%}
  .template-switch select{width:100%;max-width:none}
  .template-hero .product-summary h1{font-size:48px;overflow-wrap:anywhere}
  .template-hero .price-line strong{font-size:36px}
}
@media(max-width:360px){
  .preview-bar{justify-content:center}
  .preview-bar>span{max-width:none;width:100%;text-align:center}
  .preview-bar nav{justify-content:center}
  .catalog-hero h1{font-size:41px}
  .template-hero .product-summary h1{font-size:41px}
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
}