.pen-modal{width:min(980px,calc(100% - 32px));max-height:92vh;padding:0;border:0;border-radius:4px;background:#eeeae2;color:#171614;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.pen-modal::backdrop{background:rgba(8,8,7,.82);backdrop-filter:blur(7px)}
.pen-shell{position:relative;padding:34px}
.pen-header{padding-right:54px;margin-bottom:24px}
.pen-header .eyebrow{margin-bottom:10px;color:#a5531f}
.pen-header h2{font:700 clamp(1.9rem,4vw,3rem)/1.05 Manrope,sans-serif;letter-spacing:-.04em;margin:0}
.pen-header>p:last-child{color:#686159;margin:10px 0 0}
.pen-content{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);min-height:450px;background:#f8f5ef;border:1px solid #d2ccc2}
.pen-visual{background:#dedad3;overflow:hidden}
.pen-visual img{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .18s ease}
.pen-visual img.is-changing{opacity:.35}
.pen-details{display:flex;flex-direction:column;justify-content:center;padding:36px}
.pen-details h3,.pen-palette h3{font:700 1.7rem/1.15 Manrope,sans-serif;margin:0}
.pen-details ul{list-style:none;margin:24px 0 22px;padding:0}
.pen-details li{padding:9px 0;border-bottom:1px solid #d7d0c7;color:#59544e}
.pen-pricing{display:grid;grid-template-columns:1fr 1.08fr;gap:10px;margin-top:auto}
.pen-pricing>div{display:flex;flex-direction:column;justify-content:center;min-height:116px;padding:15px;border:1px solid #d2c8bc;background:#fff}
.pen-pricing .featured{border-color:#a5531f;background:#a5531f;color:#fff}
.pen-pricing span{font:700 .66rem/1.2 Manrope,sans-serif;letter-spacing:.15em;color:#87502e}
.pen-pricing .featured span{color:#f5d9c8}
.pen-pricing strong{font:800 1.9rem/1 Manrope,sans-serif;margin:7px 0 5px}
.pen-pricing small{font-size:.7rem;line-height:1.25;color:#665f57}
.pen-pricing .featured small{color:#f7e8df}
.pen-palette{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:22px;margin-top:20px;padding-top:20px;border-top:1px solid #c8c0b5}
.pen-swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.pen-swatches button{display:flex;align-items:center;gap:7px;padding:6px;border:1px solid transparent;border-radius:20px;background:transparent;color:#5d5851;font-size:.75rem;text-align:left;cursor:pointer}
.pen-swatches button:hover,.pen-swatches button.is-selected{border-color:#a5531f;background:#fff}
.pen-swatches button.is-selected{box-shadow:0 0 0 2px rgba(165,83,31,.16)}
.pen-swatches i{display:block;flex:0 0 24px;width:24px;height:24px;border:1px solid rgba(0,0,0,.18);border-radius:50%;background:var(--swatch)}
@media(max-width:720px){
  .pen-modal{width:calc(100% - 18px);max-height:95vh}
  .pen-shell{padding:26px 18px 22px}
  .pen-header{padding-right:35px}
  .pen-content{grid-template-columns:1fr;min-height:0}
  .pen-visual{height:330px}
  .pen-details{padding:25px}
  .pen-details ul{margin:18px 0 20px}
  .pen-pricing>div{min-height:106px;padding:13px}
  .pen-pricing strong{font-size:1.65rem}
  .pen-palette{grid-template-columns:1fr;gap:14px}
  .pen-swatches{grid-template-columns:repeat(3,1fr)}
}