/* Long-form guide pages (/guides/*.html). Tailwind handles the page shell;
   this styles the article body, which is plain HTML written by hand. */

.guide { color: #d1d5db; font-weight: 300; font-size: 17px; line-height: 1.75; }
.guide > * + * { margin-top: 1.25em; }
.guide h2 { font-family: 'Playfair Display', serif; font-weight: 400; color: #fff; font-size: 1.75rem; line-height: 1.25; margin-top: 2.6em; scroll-margin-top: 110px; }
.guide h3 { font-family: 'Playfair Display', serif; font-weight: 400; color: #fff; font-size: 1.25rem; line-height: 1.35; margin-top: 2em; scroll-margin-top: 110px; }
.guide strong, .guide b { color: #fff; font-weight: 500; }
.guide a { color: #C8A96B; text-decoration: underline; text-underline-offset: 3px; }
.guide a:hover { color: #D4AF37; }
.guide ul, .guide ol { padding-left: 1.3em; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide li + li { margin-top: .5em; }
.guide li::marker { color: #C8A96B; }
.guide blockquote { border-left: 2px solid #C8A96B; padding: .2em 0 .2em 1.2em; color: #e5e7eb; font-style: italic; }
.guide blockquote footer { font-style: normal; font-size: 13px; color: #9ca3af; margin-top: .6em; letter-spacing: .04em; }
.guide .note { border: 1px solid rgba(200,169,107,.3); background: #070b14; padding: 1.1em 1.3em; font-size: 15.5px; }
.guide .note-title { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #C8A96B; margin-bottom: .5em; font-style: normal; }
.guide .best-for { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #03070C; background: #C8A96B; padding: .25em .6em; margin-right: .4em; }
.guide .table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); }
.guide table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; min-width: 640px; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: .75em .9em; border-bottom: 1px solid rgba(255,255,255,.07); }
.guide th { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9ca3af; background: #070b14; }
.guide td:first-child { color: #fff; font-weight: 400; }
.guide tr.ours td { background: rgba(200,169,107,.07); }
.guide .cta-box { border: 1px solid rgba(200,169,107,.35); background: #070b14; padding: 1.5em; }
.guide .cta-box p { margin: 0 0 1em; }
.guide .cta-btn { display: inline-block; background: #C8A96B; color: #03070C !important; text-decoration: none !important; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 1em 1.6em; }
.guide .cta-btn:hover { background: #D4AF37; }
.guide details { border: 1px solid rgba(255,255,255,.1); background: #070b14; padding: 1em 1.2em; }
.guide details + details { margin-top: .75em; }
.guide details summary { cursor: pointer; color: #fff; list-style: none; }
.guide details summary::-webkit-details-marker { display: none; }
.guide details summary h3 { display: inline; margin: 0; font-size: 1.05rem; }
.guide details[open] summary { margin-bottom: .6em; }
.guide details p { font-size: 15.5px; }
@media (max-width: 640px) { .guide { font-size: 16px; } .guide h2 { font-size: 1.5rem; } }
/* Phones: say the table scrolls sideways */
.guide .table-hint { display: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #C8A96B; margin-bottom: -.6em; }
@media (max-width: 767px) {
  .guide .table-hint { display: block; }
}
.guide .cons { border-left: 2px solid rgba(248,113,113,.45); padding: .2em 0 .2em 1.1em; }
.guide .cons-title { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fca5a5; margin-bottom: .4em; }
.guide .cons ul { list-style: none; padding-left: 0; font-size: 15.5px; }
.guide .cons li { position: relative; padding-left: 1.1em; }
.guide .cons li::before { content: "−"; position: absolute; left: 0; color: #fca5a5; }
.guide .cons .why { display: block; color: #9ca3af; font-size: 14.5px; margin-top: .2em; }
.guide td.con { color: #fca5a5; font-size: 13.5px; }
.guide .table-wrap.wide table { min-width: 900px; }
.guide .table-hint.always { display: block; }
.guide .best-for.not-rec { background: #fca5a5; }