/* ═══════════════════════════════════════════════════════════
   NudoIQ guide pages (/guides/ and the Amazon Relay guides).
   Layered on doc.css: same header, title panel and footer, with
   long-form article prose instead of the legal .section boxes.
   Pages are generated by tools/build-guides.mjs; edit the style here.
   ═══════════════════════════════════════════════════════════ */

.prose{max-width:var(--col);margin:0 auto}
.prose > p,.prose li{color:var(--ink-4);font-size:17px;line-height:1.68}
.prose > p{margin:0 0 18px}
.prose h2{font-size:clamp(23px,2.6vw,30px);font-weight:500;letter-spacing:-.02em;line-height:1.18;
  color:var(--ink);margin:48px 0 16px}
.prose h3{font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--ink);
  margin:30px 0 10px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px}
.prose li{margin:0 0 8px;padding-left:4px}
.prose li::marker{color:var(--blue)}
.tbl{overflow-x:auto;margin:6px 0 24px;border:1px solid rgba(22,22,22,.09);border-radius:var(--ri)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:460px}
.prose th,.prose td{text-align:left;padding:12px 16px;border-bottom:1px solid rgba(22,22,22,.08);
  vertical-align:top;color:var(--ink-4)}
.prose th{background:var(--paper-2);color:var(--ink);font-weight:600}
.prose tr:last-child td{border-bottom:0}

.faq{max-width:var(--col);margin:40px auto 0}
.faq h2{font-size:clamp(23px,2.6vw,30px);font-weight:500;letter-spacing:-.02em;color:var(--ink);
  margin-bottom:14px}
.faq details{background:var(--paper-2);border:1px solid rgba(22,22,22,.07);border-radius:var(--ri);
  margin-bottom:10px}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-weight:600;
  color:var(--ink);font-size:16.5px;letter-spacing:-.01em;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:14px;font-size:22px;
  font-weight:400;color:var(--blue)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 22px 20px;color:var(--ink-4)}
.faq .a p{margin:0 0 10px}

.cta{max-width:var(--col);margin:48px auto 0;background:var(--peri);border-radius:var(--rc);
  padding:36px 34px;display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{font-size:clamp(21px,2.4vw,27px);font-weight:500;letter-spacing:-.02em;line-height:1.2;
  color:var(--ink);max-width:22ch}
.cta p{color:var(--blue-deep);font-size:14.5px;margin-top:8px}

.related{max-width:var(--col);margin:48px auto 0}
.related h2,.hub h2{font-size:14px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;
  color:var(--g3);margin-bottom:14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.cards a{display:block;background:var(--paper-2);border:1px solid rgba(22,22,22,.07);
  border-radius:var(--ri);padding:18px 20px;text-decoration:none;color:var(--ink);
  font-weight:500;letter-spacing:-.01em;line-height:1.35;min-height:44px;transition:border-color .18s}
.cards a:hover{border-color:var(--blue)}
.cards a span{display:block;margin-top:8px;font-weight:400;font-size:14px;color:var(--ink-4);line-height:1.5}
.hub{max-width:var(--max);margin:0 auto}
.hub .cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tm{max-width:var(--col);margin:14px auto 0;color:var(--g3);font-size:12.5px;line-height:1.6}

@media (max-width:660px){
  .prose > p,.prose li{font-size:16px}
  .cta{padding:28px 22px}
  .cta .btn{width:100%}
}