/* ============================================================
   Trixo Market — Shared inner-page styles
   Loaded by every page except the homepage (which uses home.css).
   ============================================================ */

/* ---- Page hero (sub-pages) ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-h) + var(--sp-7)) var(--sp-8);
  background: var(--grad-hero), var(--bg);
}
.page-hero .glow-orb { width: 360px; height: 360px; background: var(--accent); inset-block-start: -160px; inset-inline-end: -60px; opacity: 0.22; }
.page-hero__inner { max-width: 760px; position: relative; z-index: 1; }
.page-hero h1 { margin: var(--sp-4) 0; }
.page-hero p { font-size: var(--fs-lead); max-width: 60ch; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.page-hero--split .page-hero__inner { max-width: none; }
.page-hero--split .split { align-items: center; }

/* hero stat row */
.hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-7); margin-top: var(--sp-7); }
.hero-stats .v { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: #fff; }
.hero-stats .k { font-size: var(--fs-sm); color: var(--text-dim); }

/* ---- Feature rows / icon lists ---- */
.feature-row { display: grid; gap: var(--sp-4); }
.icon-list { display: grid; gap: var(--sp-4); }
.icon-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-muted); }
.icon-list svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }

/* ---- CTA banner (shared) ---- */
.cta-banner { position: relative; overflow: hidden; text-align: center; padding: clamp(3.5rem,2rem+7vw,7rem) clamp(1.5rem,1rem+5vw,5.5rem); border-radius: var(--r-xl); border: 1px solid var(--border-strong); background: radial-gradient(120% 160% at 50% 0%, rgba(238,49,66,0.22), transparent 60%), var(--bg-pure); }
.cta-banner h2 { max-width: 20ch; margin-inline: auto; }
.cta-banner p { max-width: 52ch; margin: var(--sp-4) auto var(--sp-6); font-size: var(--fs-lead); }
.cta-banner__orb { width: 360px; height: 360px; background: var(--accent); inset-block-start: -180px; inset-inline-start: 50%; transform: translateX(-50%); opacity: 0.22; }
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

/* ---- Skeleton image placeholder ---- */
.skeleton-img { background: radial-gradient(80% 120% at 20% 10%, rgba(238,49,66,0.25), transparent 50%), linear-gradient(135deg, #1c1c20, #101013); }

/* ---- Market quote grid (shared with home) ---- */
.market-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 700px) { .market-panel { grid-template-columns: 1fr; } }
.quote { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); transition: border-color var(--t-fast), transform var(--t-fast); }
.quote:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.quote__sym { font-weight: var(--fw-semibold); }
.quote__name { font-size: var(--fs-xs); color: var(--text-dim); }
.quote__price { text-align: end; font-variant-numeric: tabular-nums; }
.quote__chg { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.quote__chg.up { color: var(--up); } .quote__chg.down { color: var(--down); }

/* ---- Stats grid reuse ---- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
@media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ---- Testimonials reuse ---- */
.testi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); height: 100%; display: flex; flex-direction: column; gap: var(--sp-4); }
.testi__stars { color: #f4c150; letter-spacing: 2px; }
.testi__quote { color: var(--text); font-size: 1.05rem; flex: 1; }
.testi__who { display: flex; align-items: center; gap: var(--sp-3); }
.testi__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-accent); display: grid; place-items: center; font-weight: 700; color: #fff; }
.testi__name { font-weight: var(--fw-semibold); font-size: 0.95rem; }
.testi__role { font-size: var(--fs-xs); color: var(--text-dim); }

/* ---- Job listings (careers) ---- */
.job { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-fast); }
.job:hover { border-color: var(--accent); }
.job__meta { display: flex; gap: var(--sp-3); flex-wrap: wrap; color: var(--text-dim); font-size: var(--fs-sm); }

/* ---- Help search / categories ---- */
.help-search { display: flex; gap: var(--sp-3); max-width: 560px; margin: var(--sp-6) auto 0; }
.help-search input { flex: 1; }

/* ---- Legal / article layout ---- */
.doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--header-h) + var(--sp-4)); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-5); }
.doc-toc h4 { font-family: var(--font-sans); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: var(--sp-3); }
.doc-toc a { display: block; padding: 0.35rem 0; color: var(--text-muted); font-size: 0.9rem; }
.doc-toc a:hover { color: #fff; }
.doc-meta { color: var(--text-dim); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }
@media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; } .doc-toc { display: none; } }

/* ---- Pricing toggle / tier grid spacing ---- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
@media (max-width: 980px) { .tier-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tier-grid { grid-template-columns: 1fr; } }

/* ---- Contact layout ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info li { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); color: var(--text-muted); }
.contact-info svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.map-embed { aspect-ratio: 16/10; border-radius: var(--r-md); border: 1px solid var(--border); background: radial-gradient(60% 60% at 50% 40%, rgba(238,49,66,0.18), transparent), var(--surface-2); display: grid; place-items: center; color: var(--text-dim); }

/* ---- 404 ---- */
.notfound { min-height: 70vh; display: grid; place-items: center; text-align: center; padding-top: var(--header-h); }
.notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 3rem + 12vw, 11rem); font-weight: 700; line-height: 1; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }