/* =============================================================================
   SIXLINE GUIDES — shared stylesheet
   Design tokens (colors, fonts, radius scale, header/footer) are copied
   from the homepage's styles.css on purpose, not imported, so this
   directory has zero dependency on the homepage build and can't break it.
   If the homepage's palette ever changes, update both files deliberately.
   ============================================================================= */

/* ── Base (identical to homepage) ── */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background-color: #07070B; min-height: 100%; }
html { scroll-behavior: smooth; }
body {
  color: #F2F3F7;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
@media (prefers-reduced-motion: reduce) { *{ animation-duration:.001s !important; transition-duration:.001s !important; } }

a:focus-visible, button:focus-visible {
  outline: 2px solid #5C9BEE;
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media(min-width:760px){ .wrap{ padding: 0 40px; } }
section, header, footer { background-color: transparent; position: relative; z-index: 1; }

/* ── App Store badge (identical to homepage) ── */
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background-color: #FFFFFF; border-radius: 12px;
  padding: 9px 18px 9px 15px; cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.55); }
.store-badge .text { line-height: 1.12; }
.store-badge .text .small { display: block; font-size: 9.5px; font-weight: 500; color: #3C3C43; }
.store-badge .text .big { display: block; font-size: 16px; font-weight: 700; color: #0A0A0C; letter-spacing: -0.01em; }

/* ── Nav (identical to homepage, minus the demo/pricing anchors that don't exist here) ── */
header {
  position: sticky; top: 0; z-index: 60;
  background-color: rgba(7,7,11,0.86);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
@supports (backdrop-filter: blur(1px)) { header { backdrop-filter: blur(14px); } }
nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; max-width: 1180px; margin: 0 auto; }
@media(min-width:760px){ nav{ padding: 16px 40px; } }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-text .name { font-weight: 800; font-size: 16px; letter-spacing: 0.14em; line-height: 1.1; }
.brand-text .tag { font-size: 7.5px; letter-spacing: 0.3em; color: #7A72E8; font-weight: 700; margin-top: 2px; }
.nav-store { display: none; }
@media(min-width:560px){ .nav-store{ display: inline-flex; } }
.nav-store.store-badge { padding: 6px 14px 6px 11px; border-radius: 10px; }
.nav-store .text .small { font-size: 8px; }
.nav-store .text .big { font-size: 13px; }
.nav-back { font-size: 14px; color: #9A9AA6; font-weight: 500; transition: color .3s ease; display: none; }
@media(min-width:560px){ .nav-back { display: inline-flex; align-items: center; gap: 6px; } }
.nav-back:hover { color: #F2F3F7; }

/* ── Footer (identical to homepage) ── */
footer { padding: 84px 0 42px; border-top: 1px solid rgba(255,255,255,0.05); margin-top: 100px; }
.footer-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; margin-bottom: 56px; }
@media(min-width:760px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr; gap: 24px; } }
.footer-brand-desc { font-size: 13px; color: #6C6C78; max-width: 250px; line-height: 1.68; margin-top: 16px; }
.footer-col h3 { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #5C5C66; margin-bottom: 19px; }
.footer-col a { display:block; font-size: 13.5px; color: #9A9AA6; margin-bottom: 13px; transition: color .2s ease, transform .2s ease; }
.footer-col a:hover { color: #F2F3F7; transform: translateX(2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.05); padding-top: 26px; text-align:center; font-size: 12px; letter-spacing: 0.01em; color: #78787E; }

/* =============================================================================
   ARTICLE LAYOUT — new for guides, not present on the homepage
   ============================================================================= */

.article-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
@media(min-width:760px){ .article-wrap{ padding: 0 40px; } }

.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #6C6C78; padding: 28px 0 0; }
.breadcrumb a { color: #8A8A94; transition: color .2s ease; }
.breadcrumb a:hover { color: #F2F3F7; }

.article-header { padding: 20px 0 40px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 40px; }
.article-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #7A72E8; margin-bottom: 14px; }
.article-header h1 { font-size: clamp(28px, 4.2vw, 42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 16px; color: #F5F6FA; }
.article-dek { font-size: 16.5px; line-height: 1.65; color: #9A9AA6; max-width: 600px; }
.article-meta { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 12px; color: #6C6C78; }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #4B4B55; }

.prose { font-size: 16px; line-height: 1.75; color: #C9CDD6; }
.prose > * + * { margin-top: 20px; }
.prose h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #F5F6FA; margin-top: 52px; margin-bottom: 4px; line-height: 1.25; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: #F2F3F7; margin-top: 32px; margin-bottom: 2px; }
.prose p { color: #C9CDD6; }
.prose strong { color: #F2F3F7; font-weight: 600; }
.prose a { color: #6EA8F0; text-decoration: underline; text-decoration-color: rgba(110,168,240,0.35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: #6EA8F0; }
.prose ul, .prose ol { padding-left: 22px; color: #C9CDD6; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: #6C6C78; }

/* Quick-facts callout — used for "the short answer" summaries at the top
   of a guide, so someone skimming gets the number/answer without reading
   the full explanation below it. */
.quick-facts {
  background-color: #0C0C10; border: 1px solid rgba(124,111,240,0.22); border-radius: 16px;
  padding: 22px 24px; margin: 28px 0;
}
.quick-facts-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #A79EF7; margin-bottom: 12px; }
.quick-facts dl { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media(min-width:560px){ .quick-facts dl { grid-template-columns: 1fr 1fr; gap: 14px 24px; } }
.quick-facts dt { font-size: 12px; color: #8A8A94; }
.quick-facts dd { font-size: 14.5px; font-weight: 600; color: #F2F3F7; margin-top: 2px; }

/* Spec/interval tables */
.spec-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14.5px; }
.spec-table th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8A8A94; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.spec-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); color: #C9CDD6; }
.spec-table tr:last-child td { border-bottom: none; }
.spec-table td:first-child, .spec-table th:first-child { color: #F2F3F7; font-weight: 600; }

/* Inline engine/chassis code styling — reads as a spec, not prose */
.code-chip { display: inline-block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 0.88em; background: rgba(255,255,255,0.06); border-radius: 5px; padding: 1px 7px; color: #E4E5EA; }

/* Disclaimer note — used once per guide where a number genuinely varies
   by model/year/market and shouldn't be read as a universal hard fact. */
.disclaimer { display: flex; gap: 10px; background-color: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.07); border-radius: 12px; padding: 14px 16px; font-size: 13px; color: #8A8A94; line-height: 1.6; }
.disclaimer svg { flex-shrink: 0; margin-top: 2px; }

/* In-article CTA — appears once, near the end, contextual to the guide's
   own topic (the sentence itself is written per-page, not templated). */
.article-cta {
  margin: 56px 0 8px; padding: 32px; border-radius: 20px;
  background-color: #0E0E13; border: 1px solid rgba(124,111,240,0.25);
  position: relative; overflow: hidden;
}
.article-cta::before { content:''; position:absolute; right:-60px; top:-60px; width:200px; height:200px; background: radial-gradient(circle, rgba(124,111,240,0.22), transparent 65%); filter: blur(12px); pointer-events:none; }
.article-cta-inner { position: relative; z-index: 1; }
.article-cta h3 { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; color: #F5F6FA; }
.article-cta p { font-size: 14px; color: #9A9AA6; line-height: 1.6; margin-bottom: 20px; max-width: 440px; }

/* Related-guides list — the "sideways" cluster links */
.related-guides { margin: 56px 0; }
.related-guides h2 { font-size: 20px; font-weight: 800; margin-bottom: 16px; color: #F5F6FA; }
.related-list { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media(min-width:640px){ .related-list { grid-template-columns: 1fr 1fr; } }
.related-list a {
  display: block; padding: 16px 18px; border-radius: 12px;
  background-color: #0C0C10; border: 1px solid rgba(255,255,255,0.07);
  font-size: 14px; font-weight: 600; color: #E4E5EA;
  transition: border-color .25s ease, transform .25s ease;
}
.related-list a:hover { border-color: rgba(124,111,240,0.35); transform: translateY(-2px); }
.related-list a span { display: block; font-size: 12px; font-weight: 400; color: #6C6C78; margin-top: 4px; }

/* =============================================================================
   GUIDES HUB (index page)
   ============================================================================= */

.hub-hero { padding: 56px 0 48px; text-align: center; }
.hub-hero .article-eyebrow { justify-content: center; display: flex; }
.hub-hero h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; }
.hub-hero p { font-size: 16px; color: #9A9AA6; max-width: 520px; margin: 0 auto; line-height: 1.6; }

.hub-category { margin-bottom: 48px; }
.hub-category h2 { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #7A72E8; margin-bottom: 18px; }
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media(min-width:640px){ .hub-grid { grid-template-columns: 1fr 1fr; } }
.hub-card {
  display: block; padding: 20px 22px; border-radius: 14px;
  background-color: #0C0C10; border: 1px solid rgba(255,255,255,0.07);
  transition: border-color .25s ease, transform .25s ease;
}
.hub-card:hover { border-color: rgba(124,111,240,0.3); transform: translateY(-2px); }
.hub-card h3 { font-size: 15.5px; font-weight: 700; color: #F2F3F7; margin-bottom: 6px; letter-spacing: -0.01em; }
.hub-card p { font-size: 13px; color: #8A8A94; line-height: 1.55; }