/* Guides (content engine, 2026-10-29). Loaded only on /guides/ pages; uses the tokens in styles.css. */
.g-head { background: var(--ink); color: #fff; padding: var(--s10) 0 var(--s8); }
.g-head .shell > * { max-width: 940px; }
.g-h1 { font-size: clamp(38px, 4.4vw, 64px); line-height: .95; max-width: 18em; }
.g-answer { margin-top: var(--s3); color: #f1efe9; font-size: 19px; line-height: 1.55; max-width: 38em; }
.g-answer a { color: #fff; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.g-meta { margin-top: var(--s3); }
.g-detail { padding-top: var(--s8); }
.g-body { font-size: 18px; line-height: 1.7; }
.g-fig { margin: 0 0 var(--s6); }
.g-fig img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.g-sec + .g-sec, .g-cta + .g-sec { margin-top: var(--s8); }
.g-sec h2 { font-size: clamp(28px, 2.6vw, 38px); margin-bottom: var(--s2); }
.g-sec p + p { margin-top: var(--s2); }
.g-sec a, .faq details p a { color: var(--text); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.g-list { margin-top: var(--s2); border-top: 1px solid var(--rule); }
.g-list li { position: relative; padding: 12px 0 12px 28px; border-bottom: 1px solid var(--rule); }
.g-list li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 10px; height: 10px; background: var(--orange); border-radius: 2px; }
.g-faq .faq { margin-top: var(--s2); }
.g-cta { margin-top: var(--s8); padding: var(--s4); border-radius: 8px; background: var(--paper); border-top: 4px solid var(--orange); }
.g-cta-end { background: var(--ink); color: #fff; }
.g-cta-t { font: 800 32px/1 var(--display); text-transform: uppercase; }
.g-cta > p:not(.g-cta-t) { margin-top: var(--s1); color: var(--text-2); font-size: 16px; }
.g-cta-end > p:not(.g-cta-t) { color: var(--on-dark); }
.g-cta-row { margin-top: var(--s3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.g-cta-call { display: inline-flex; align-items: center; gap: 8px; font: 700 17px/1 var(--semi); letter-spacing: .03em; text-decoration: none; }
.g-cta-call .ic { color: var(--orange); }
.g-cta-call:hover { text-decoration: underline; text-underline-offset: 4px; }
.g-rel { margin-top: var(--s8); }
.g-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
.g-card a { position: relative; display: flex; flex-direction: column; gap: 12px; height: 100%; padding: var(--s3) var(--s3) var(--s6); border: 1px solid var(--rule); border-top: 4px solid var(--orange); border-radius: 8px; background: var(--paper); text-decoration: none; transition: box-shadow .2s ease, transform .2s var(--ease); }
.g-card a:hover { box-shadow: 0 10px 30px rgba(18,19,20,.12); transform: translateY(-2px); }
.g-card-t { font: 800 26px/1.02 var(--display); text-transform: uppercase; }
.g-card-x { color: var(--text-2); font-size: 15.5px; }
.g-card-go { position: absolute; right: var(--s3); bottom: var(--s3); color: var(--orange-ink); }
@media (max-width: 1100px) {
  .guide .detail-main, .guide .side { grid-column: 1 / -1; }
  .guide .side { position: static; margin-top: var(--s8); }
}
@media (max-width: 640px) {
  .g-head { padding: var(--s6) 0 var(--s5); }
  .g-h1 { font-size: 34px; }
  .g-answer { font-size: 17px; }
  .g-body { font-size: 17px; }
  .g-cta { padding: var(--s3); }
  .g-cta-t { font-size: 26px; }
  .g-cta .btn { width: 100%; }
}
/* Guide images (2026-10-31): created hero + real job proof photos */
.g-proof { margin-top: var(--s8); }
.g-proof-t { font: 800 26px/1.05 var(--display); text-transform: uppercase; margin-bottom: var(--s2); }
.g-proof-grid { display: grid; gap: var(--s2); }
.g-proof-2 { grid-template-columns: 1fr 1fr; }
.g-proof-3 { grid-template-columns: repeat(3, 1fr); }
.g-proof-fig { margin: 0; }
.g-proof-fig img { width: 100%; height: auto; object-fit: cover; border-radius: 8px; display: block; }
.g-proof-fig figcaption { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.4; }
@media (max-width: 640px) { .g-proof-2, .g-proof-3 { grid-template-columns: 1fr; } }
@media (min-width: 641px) { .g-proof-2 .g-proof-fig img { aspect-ratio: 1 / 1; } }
.g-proof-fig img { object-position: center 70%; }