/* Shared page extras (how-to, FAQ, related tools, feedback). Self-contained: works on every tool page. */
.oct-extras { max-width: 860px; margin: 36px auto 10px; padding: 0 20px; font-family: 'Outfit', system-ui, sans-serif; color: #0f0e0c; text-align: left; }
.oct-extras h2 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.2; margin: 26px 0 8px; }
.oct-extras h3 { font-size: 16px; font-weight: 600; margin: 14px 0 4px; }
.oct-extras p, .oct-extras li { font-size: 14.5px; line-height: 1.6; color: #3b3832; }
.oct-extras ul, .oct-extras ol { margin: 6px 0 6px 20px; }
.oct-extras details { background: #fff; border: 1px solid #ddd9d0; border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; }
.oct-extras summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.oct-extras details p { margin-top: 6px; }
.oct-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.oct-links a { font-size: 13.5px; text-decoration: none; background: #fff; border: 1px solid #ddd9d0; border-radius: 100px; padding: 6px 13px; color: #0f0e0c; }
.oct-links a:hover { border-color: #c8502a; color: #c8502a; }
.oct-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 8px; padding: 12px 16px; background: #fff; border: 1px solid #ddd9d0; border-radius: 14px; font-size: 15px; }
.oct-feedback button { border: 1px solid #ddd9d0; background: #f5f2ed; border-radius: 100px; padding: 5px 14px; font-size: 18px; cursor: pointer; line-height: 1.2; }
.oct-feedback button:hover { border-color: #c8502a; }
.oct-feedback a { color: #c8502a; }
.oct-install { display: inline-flex; align-items: center; gap: 6px; border: none; background: #0f0e0c; color: #f5f2ed; border-radius: 100px; padding: 9px 18px; font: 500 14px 'Outfit', system-ui, sans-serif; cursor: pointer; margin: 4px 0 12px; }
.oct-install[hidden] { display: none; }
@media (max-width: 520px) { .oct-extras { padding: 0 14px; } .oct-extras h2 { font-size: 24px; } }