/* Styles for the deepened sections on the individual product pages: what's
   inside, who it is for, specifications, and the per-product FAQ.
 *
 * These live in their own file rather than being appended to product-page.css
 * on purpose. Everything under /assets is served with a year-long immutable
 * cache (see _headers), so editing product-page.css would leave repeat
 * visitors holding a stale copy of it against new markup. A new file is a new
 * URL, so there is nothing stale to hold.
 */

.detail {
  padding: clamp(70px,9vw,130px) clamp(24px,8vw,130px);
  border-top: 1px solid var(--line);
}
.detail-head { max-width: 760px; margin-bottom: clamp(40px,5vw,64px); }
.detail-head h2 { font: 400 clamp(38px,5.5vw,72px)/1.02 var(--serif); margin: 0; }
.detail-head h2 em { color: var(--accent); }
.detail-head p { color: var(--muted); line-height: 1.85; margin: 22px 0 0; font-size: 15px; }

figure.cover { margin: 0 0 clamp(40px,5vw,60px); }
figure.cover img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); background: var(--deep);
}
figure.cover figcaption {
  color: var(--muted); font-size: 12px; letter-spacing: .04em;
  margin-top: 14px; line-height: 1.6;
}

.screens { display: grid; grid-template-columns: repeat(auto-fill,minmax(290px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.screen { background: var(--ink); padding: 30px clamp(22px,2.4vw,32px) 34px; }
.screen .n { color: var(--accent); font: 400 15px var(--serif); letter-spacing: .18em; display: block; margin-bottom: 14px; }
.screen h3 { margin: 0 0 10px; font: 400 23px var(--serif); }
.screen p { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.7; }

.who {
  margin: 0 clamp(20px,5vw,72px) 0;
  padding: clamp(46px,6vw,86px) clamp(28px,5vw,80px);
  background: var(--deep); border: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,72px);
}
.who h2 { font: 400 clamp(28px,3.4vw,44px)/1.1 var(--serif); margin: 0 0 8px; }
.who .yes h2 { color: var(--paper); }
.who .no h2 { color: var(--muted); }
.who ul { list-style: none; padding: 0; margin: 20px 0 0; }
.who li {
  position: relative; padding: 14px 0 14px 28px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: var(--muted); line-height: 1.6; font-size: 14px;
}
.who .yes li:before { content: '✓'; position: absolute; left: 0; color: var(--accent); }
.who .no li:before { content: '×'; position: absolute; left: 0; color: #7d7367; }

.specs { padding: clamp(70px,8vw,120px) clamp(24px,8vw,130px); }
.specs h2 { font: 400 clamp(32px,4vw,56px)/1.05 var(--serif); margin: 0 0 clamp(32px,4vw,48px); }
.specs h2 em { color: var(--accent); }
.specs dl { margin: 0; border-top: 1px solid var(--line); }
.specs dl > div {
  display: grid; grid-template-columns: minmax(150px,.3fr) 1fr; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.specs dt { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-size: 10px; padding-top: 4px; }
.specs dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.specs dd code { font-size: 12.5px; color: var(--paper); background: rgba(255,255,255,.05); padding: 2px 6px; }

.faq { padding: clamp(20px,3vw,40px) clamp(24px,8vw,130px) clamp(80px,9vw,130px); }
.faq h2 { font: 400 clamp(32px,4.4vw,60px)/1.05 var(--serif); margin: 0 0 clamp(32px,4vw,48px); }
.faq h2 em { color: var(--accent); }
.qa { border-bottom: 1px solid var(--line); padding: 26px 0; max-width: 900px; }
.qa:first-of-type { border-top: 1px solid var(--line); }
.qa h3 { margin: 0 0 10px; font: 400 21px var(--serif); }
.qa p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.qa a { color: var(--accent); }

@media(max-width:850px){
  .who { grid-template-columns: 1fr; margin-left: 14px; margin-right: 14px; }
  .specs dl > div { grid-template-columns: 1fr; gap: 8px; }
}