/* ============================================================
   TENONFOLD — product page
   Loaded after site.css by /room-measure and /home-measure.
   ============================================================ */

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:start;
  padding-block:56px 8px;
}
.hero > *{ min-width:0 }

@media (max-width:800px){
  .hero{ grid-template-columns:1fr; gap:34px; padding-block:38px 8px }
}

.cover{
  display:block;
  width:100%;
  border:1px solid var(--tf-rule);
}

.title{
  font-weight:600;
  font-size:clamp(38px, 6.4vw, 58px);
  line-height:var(--tf-lh-tight);
  letter-spacing:-.015em;
  margin:0;
}

.deck{
  font-family:var(--tf-serif);
  font-style:italic;
  font-size:clamp(21px, 3.2vw, 27px);
  line-height:1.28;
  color:var(--tf-forest);
  margin:20px 0 0;
  max-width:22em;
}

/* ---------- buy ---------- */
.buy{
  display:flex;
  align-items:baseline;
  gap:20px;
  flex-wrap:wrap;
  margin:34px 0 0;
  padding-top:26px;
  border-top:1px solid var(--tf-rule);
}
.buy__price{
  font-weight:500;
  font-size:26px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.buy__free{ font-size:22px }
.buy__note{
  width:100%;
  margin:0;
  font-size:var(--tf-size-small);
  color:var(--tf-quiet);
}

/* ---------- body ---------- */
/* .section carries the page gutter, .body carries the measure. Keeping the
   two on one element centred the prose at 36em while the hero above it was
   left-aligned at 1040, and the mismatch read as an accident. */
.section{ padding-block:58px 10px }
.body{ max-width:36em }

.body h2{
  font-weight:600;
  font-size:var(--tf-size-h3);
  margin:44px 0 14px;
}
.body h2:first-child{ margin-top:0 }
.body p{ margin:0 0 16px }
.body ul{
  margin:0 0 16px;
  padding-left:0;
  list-style:none;
}
.body li{
  position:relative;
  padding-left:20px;
  margin-bottom:11px;
}
.body li::before{
  content:"";
  position:absolute;
  left:0;
  top:.72em;
  width:8px;
  height:1px;
  background:var(--tf-clay);
}
.body strong{ font-weight:600 }

.callout{
  background:var(--tf-sheet);
  border:1px solid var(--tf-rule);
  padding:22px 24px;
  margin:30px 0 0;
}
.callout p:last-child{ margin-bottom:0 }

/* ---------- cross sell ---------- */
.next{
  margin:64px 0 0;
  padding:32px 0 0;
  border-top:1px solid var(--tf-rule);
}
.next__card{
  display:flex;
  gap:26px;
  align-items:baseline;
  flex-wrap:wrap;
  justify-content:space-between;
}
.next__card > *{ min-width:0 }
.next__copy{ max-width:34em }
.next__title{
  font-weight:600;
  font-size:var(--tf-size-h3);
  margin:6px 0 8px;
}
.next__copy p{
  margin:0;
  color:var(--tf-quiet);
  font-size:var(--tf-size-small);
}