/* Below-the-hero sections: trust row, reviews, guarantee, FAQ, footer. */

/* trust row under the buy button */
.trust { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust svg { flex: none; width: 16px; height: 16px; color: var(--glass-ink); }
.pay { margin-top: 10px; font-size: 12px; color: var(--faint); }

/* star badge beside the price, shown once reviews exist */
.stars { color: #e3a008; letter-spacing: 1px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); text-decoration: none; margin-top: 4px; }
.badge b { color: var(--ink); }

/* reviews */
.rev-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.rev-score { font: 800 15px var(--font); }
.rev-list { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 760px) { .rev-list { grid-template-columns: repeat(3, 1fr); } }
.rev { border: 1px solid var(--line-2); border-radius: 4px; padding: 16px; display: grid; gap: 8px; align-content: start; }
.rev p { color: var(--ink-2); font-size: 15px; }
.rev footer { all: unset; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--faint); }
.rev footer b { color: var(--ink); font-weight: 600; }
.rev .ok { color: var(--glass-ink); font-weight: 600; }
.rev-more { margin-top: 14px; }

/* guarantee */
.promise { display: grid; gap: 20px; align-items: center; }
.promise::before { grid-column: 1 / -1; margin-bottom: 2px !important; } /* the section rule spans the row, not a cell */
@media (min-width: 760px) { .promise { grid-template-columns: 1fr 240px; } }
.promise h2 + p { margin-top: 8px; color: var(--ink-2); max-width: 520px; font-size: 17px; }
.promise canvas { image-rendering: pixelated; width: 240px; height: 140px; justify-self: center; }

/* FAQ */
.faq { margin-top: 14px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 15px 28px 15px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 2px; top: 12px; font: 400 22px var(--font); color: var(--muted); }
.faq details[open] summary::after { content: '–'; }
.faq details p { padding: 0 0 16px; color: var(--ink-2); max-width: 620px; }

/* footer */
.site-foot { border-top: 2px solid var(--ink); margin-top: 24px; padding: 32px 0 28px; color: var(--muted); font-size: 14px; }
.site-foot .cols { display: grid; gap: 26px; }
@media (min-width: 760px) { .site-foot .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot .brand { color: var(--ink); }
.site-foot p { margin-top: 8px; max-width: 300px; }
.site-foot h4 { margin: 0 0 10px; font: 600 11.5px var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--faint); }