/* Price guide pages: the answer printed big on the counter, recent sales on a receipt, tools in recessed wells. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn:hover{translate:0 -2px}
.btn-key{background:var(--on-counter);color:var(--counter-ink)}
.btn-key:hover{background:#E6EAFF}
.btn-deep{background:var(--counter-ink);color:var(--on-counter)}
.btn-deep:hover{background:#08104A}
.head .eyebrow-c{font:600 .72rem/1 var(--mono);font-stretch:75%;letter-spacing:.12em;text-transform:uppercase;color:#9FB0FF;margin:0 0 16px}

/* lookup box, same recess as the homepage keypad */
.lookup{display:flex;gap:6px;margin-top:24px;max-width:34rem;background:var(--counter-deep);border:2px solid var(--counter-ink);border-radius:3px;padding:6px}
.lookup:focus-within{border-color:var(--on-counter)}
.lookup input{flex:1;min-width:0;background:transparent;border:0;color:var(--on-counter);font:500 1rem/1 var(--mono);font-stretch:75%;padding:10px}
.lookup input::placeholder{color:#97A6F2}
.lookup input:focus{outline:none}

/* the answer */
.answer .big{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:22px 0 0;max-width:none}
.answer .big strong{font:900 clamp(4rem,11vw,7.5rem)/.85 var(--display);font-stretch:62%;color:var(--on-counter)}
.answer .big span{font:600 .8rem/1 var(--mono);font-stretch:75%;letter-spacing:.1em;text-transform:uppercase;color:var(--on-counter-2)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:28px 0 0;background:var(--counter-deep);border:2px solid var(--counter-ink);border-radius:3px}
.strip div{padding:14px 16px;border-left:1px solid var(--counter-rule)}
.strip div:first-child{border-left:0}
.strip dt{font:600 .68rem/1.3 var(--mono);font-stretch:75%;letter-spacing:.08em;text-transform:uppercase;color:#9FB0FF}
.strip dd{margin:8px 0 0;font:800 1.5rem/1 var(--display);font-stretch:62%;color:var(--on-counter)}
.answer .note{font-size:.95rem;margin-top:16px;max-width:44rem}
.answer .note strong{color:var(--on-counter);text-transform:capitalize}

/* receipt of recent sales + side tools */
.price-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);align-items:start;padding-bottom:clamp(40px,6vw,72px)}
.paper{background:var(--paper);color:var(--thermal)}
.receipt{padding:22px 20px 34px;font:400 .78rem/1.5 var(--mono);font-stretch:75%;
  --z:14px;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--z) 100%;
          mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/var(--z) 100%}
.r-head{text-align:center;text-transform:uppercase;letter-spacing:.08em}
.r-store{font:900 1.35rem/1 var(--display);font-stretch:62%;letter-spacing:.06em;margin-bottom:6px}
.r-sub{color:var(--thermal-2)}
.r-cut{border:0;border-top:1px dashed var(--rule);margin:12px 0}
.r-items{list-style:none;margin:0;padding:0}
.r-item{display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:8px;padding:6px 0;border-bottom:1px dotted #DAD9D2}
.r-item:last-child{border-bottom:0}
.r-n{color:var(--thermal-2);font-size:.7rem;padding-top:1px}
.r-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.r-title a{text-decoration:none;color:inherit}
.r-title a:hover{text-decoration:underline}
.r-meta{grid-column:2/4;color:var(--thermal-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.02em}
.r-price{font-weight:700;text-align:right}
.r-foot{text-align:center;color:var(--thermal-2);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin:6px 0 0}

aside{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}
.well{background:var(--counter-deep);border:2px solid var(--counter-ink);border-radius:3px;padding:18px 18px 20px}
.well h2,.related h2,.devs h2,.how h2,.group h2{font:900 1.35rem/1 var(--display);font-stretch:62%;letter-spacing:.04em;text-transform:uppercase;margin:0 0 12px}
.well p{color:var(--on-counter-2);margin:0 0 10px;font-size:.95rem}
.tag{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tag label{font-weight:600;color:var(--on-counter-2);font-size:.9rem}
.cost-field{display:inline-flex;align-items:center;gap:4px;background:var(--counter);border:2px solid var(--counter-ink);border-radius:3px;padding:0 10px;
  font:500 .95rem/1 var(--mono);font-stretch:75%;color:var(--on-counter)}
.cost-field:focus-within{border-color:var(--on-counter)}
.cost-field input{width:80px;background:transparent;border:0;color:var(--on-counter);font:inherit;padding:10px 0}
.cost-field input::placeholder{color:#97A6F2}
.cost-field input:focus{outline:none}
.verdict{margin:14px 0 0;color:var(--on-counter-2);min-height:1.5em}
.verdict strong{font:900 1.6rem/1 var(--display);font-stretch:62%;letter-spacing:.1em;color:var(--on-counter);margin-right:6px}
.well pre{margin:0 0 10px;padding:12px;background:var(--counter-ink);border-radius:3px;overflow-x:auto;
  font:400 .74rem/1.6 var(--mono);font-stretch:75%;color:var(--on-counter)}
.well a,.related a,.devs a:not(.btn){color:var(--on-counter);font-weight:600}
.related ul,.group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.related li a,.group li a{display:inline-block;font:500 .78rem/1 var(--mono);font-stretch:75%;text-transform:uppercase;letter-spacing:.04em;
  text-decoration:none;color:var(--on-counter-2);border:1px solid var(--counter-rule);border-radius:2px;padding:9px 10px}
.related li a:hover,.group li a:hover{background:var(--on-counter);color:var(--counter-ink);border-color:var(--on-counter)}
.related .lookup{margin-top:0}
.how{border-top:1px solid var(--counter-rule);padding:32px 0 64px;max-width:52rem}
.how p{color:var(--on-counter-2)}

/* index */
.guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px;max-width:none;margin-bottom:48px}
.guide .group h2{color:var(--thermal)}
.guide .group li a{color:var(--thermal);border-color:var(--rule)}
.guide .group li a:hover{background:var(--thermal);color:var(--paper);border-color:var(--thermal)}
.devs{padding:8px 0 72px;max-width:44rem}
.devs p{color:var(--on-counter-2)}
.devs .btn{margin:6px 8px 0 0}

@media (max-width:880px){
  .price-layout{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip div:nth-child(3){border-left:0}
  .strip div:nth-child(n+3){border-top:1px solid var(--counter-rule)}
}
@media (max-width:560px){
  .guide{grid-template-columns:minmax(0,1fr)}
  .lookup .btn{padding:12px 14px}
  .receipt{padding-left:16px;padding-right:16px}
}
.sheet.guide section + section{margin:0;padding:0;border:0}