/* ============================================================================
   TREX OTT — SEO/GEO landing pages
   Scoped to .trex-seo so it cannot affect theme chrome. Uses brand tokens.
   ============================================================================ */

.trex-seo{
  --maxw: 1080px;
  color: var(--trex-text, #E6E8EB);
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  line-height: var(--lh-body, 1.6);
  font-size: 1.02rem;
}
.trex-seo *{ box-sizing: border-box; }
.trex-seo .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.trex-seo section{ padding: 40px 0; border-top: 1px solid var(--trex-border, #1F2937); }
.trex-seo section:first-of-type{ border-top: 0; }

.trex-seo h1{
  font-family: var(--font-display, "Inter", sans-serif);
  font-size: var(--fs-h1, clamp(2.2rem, 4vw + 1rem, 3.6rem));
  line-height: 1.1; margin: 0 0 14px; letter-spacing: -0.02em;
}
.trex-seo h2{
  font-size: var(--fs-h2, clamp(1.6rem, 2.4vw + .6rem, 2.4rem));
  line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.01em;
}
.trex-seo h3{ font-size: 1.25rem; margin: 0 0 8px; }
.trex-seo p{ margin: 0 0 14px; color: var(--trex-text, #E6E8EB); }
.trex-seo .lead{ font-size: 1.15rem; color: var(--trex-muted, #8B92A5); max-width: 760px; }
.trex-seo a{ color: var(--trex-accent-2, #2EA8FF); text-decoration: none; }
.trex-seo a:hover{ text-decoration: underline; }

/* hero */
.trex-seo .hero{ text-align: center; padding: 56px 0 44px; }
.trex-seo .hero .lead{ margin-left: auto; margin-right: auto; }
.trex-seo .eyebrow{
  display:inline-block; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--trex-accent, #FFB81C); margin-bottom: 14px; font-weight:600;
}

/* CTAs */
.trex-seo .cta-row{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top: 22px; }
.trex-seo .btn{
  display:inline-block; padding: 13px 26px; border-radius: var(--r-pill, 999px);
  font-weight: 700; font-size: 1rem; transition: transform .15s ease, box-shadow .15s ease;
}
.trex-seo .btn:hover{ text-decoration:none; transform: translateY(-1px); }
.trex-seo .btn-primary{ background: var(--trex-accent, #FFB81C); color:#0A0E14; box-shadow: var(--shadow-glow); }
.trex-seo .btn-secondary{ background: transparent; color: var(--trex-text,#E6E8EB); border:1px solid var(--trex-border,#1F2937); }

/* answer block (GEO) */
.trex-seo .answer-block{
  background: var(--trex-surface, #131821); border:1px solid var(--trex-border,#1F2937);
  border-left: 3px solid var(--trex-accent, #FFB81C);
  border-radius: var(--r-md, 10px); padding: 22px 24px; margin: 8px auto 0; max-width: 860px;
}
.trex-seo .answer-block h2{ font-size: 1.3rem; margin-bottom: 8px; }
.trex-seo .answer-block p{ margin: 0; color: var(--trex-text,#E6E8EB); }

/* grids / cards */
.trex-seo .grid{ display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.trex-seo .card{
  background: var(--trex-surface, #131821); border:1px solid var(--trex-border,#1F2937);
  border-radius: var(--r-md, 10px); padding: 20px;
}
.trex-seo .card h3{ color: var(--trex-text,#E6E8EB); }
.trex-seo .card p{ color: var(--trex-muted,#8B92A5); margin:0; font-size:.96rem; }
.trex-seo ul.ticks{ list-style:none; padding:0; margin: 0 0 14px; }
.trex-seo ul.ticks li{ padding: 6px 0 6px 28px; position:relative; }
.trex-seo ul.ticks li::before{ content:"✓"; position:absolute; left:0; color: var(--trex-success,#22C55E); font-weight:700; }

/* steps */
.trex-seo ol.steps{ counter-reset: s; list-style:none; padding:0; margin:0; }
.trex-seo ol.steps li{ position:relative; padding: 10px 0 14px 46px; border-bottom:1px solid var(--trex-border,#1F2937); }
.trex-seo ol.steps li:last-child{ border-bottom:0; }
.trex-seo ol.steps li::before{
  counter-increment:s; content: counter(s); position:absolute; left:0; top:8px;
  width:30px; height:30px; border-radius:50%; background: var(--trex-elevated,#1A2030);
  color: var(--trex-accent,#FFB81C); display:grid; place-items:center; font-weight:700; font-size:.95rem;
  border:1px solid var(--trex-border,#1F2937);
}

/* table */
.trex-seo .table-wrap{ overflow-x:auto; }
.trex-seo table{ width:100%; border-collapse:collapse; min-width: 560px; }
.trex-seo th, .trex-seo td{ text-align:left; padding: 12px 14px; border-bottom:1px solid var(--trex-border,#1F2937); }
.trex-seo thead th{ color: var(--trex-accent,#FFB81C); font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; }
.trex-seo tbody tr:hover{ background: var(--trex-surface,#131821); }

/* FAQ */
.trex-seo .faq details{
  background: var(--trex-surface,#131821); border:1px solid var(--trex-border,#1F2937);
  border-radius: var(--r-md,10px); padding: 14px 18px; margin-bottom: 10px;
}
.trex-seo .faq summary{ cursor:pointer; font-weight:600; list-style:none; }
.trex-seo .faq summary::-webkit-details-marker{ display:none; }
.trex-seo .faq summary::after{ content:"+"; float:right; color:var(--trex-accent,#FFB81C); font-weight:700; }
.trex-seo .faq details[open] summary::after{ content:"–"; }
.trex-seo .faq details p{ margin: 12px 0 0; color: var(--trex-muted,#8B92A5); }

/* breadcrumbs */
.trex-seo .crumbs{ font-size:.85rem; color: var(--trex-muted,#8B92A5); padding: 18px 0 0; }
.trex-seo .crumbs a{ color: var(--trex-muted,#8B92A5); }

/* internal link cluster */
.trex-seo .links-inline{ display:flex; gap:10px 18px; flex-wrap:wrap; margin: 6px 0 0; }
.trex-seo .related a{ display:inline-block; padding:8px 14px; border:1px solid var(--trex-border,#1F2937); border-radius: var(--r-pill,999px); margin:0 8px 8px 0; font-size:.92rem; }