/* ==========================================================================
   Trading Lab help surfaces — FAQ accordion + guide hub + guide article.
   Prefixes: .lb-faq (accordion), .lg- (guide hub & article)

   Why a shared file (same reasoning as compare.css): the FAQ renders on both
   the Lab landing page and the guide hub, and the hub and article pages are
   one design. Keeping it in per-page <style> islands is exactly how the two
   comparison blocks drifted apart. Anything new on these pages goes here.

   Palette is the public-site light theme already used by templates/lab/landing.html:
     ink #0d1b3e - body #6b7c99 - blue #3f78e0 - band #f7f9ff - line #e6ebf5
   ========================================================================== */

/* -- FAQ accordion (details/summary, same pattern as the pricing page) -- */
.lb-faq { max-width: 780px; margin: 0 auto; }
.lb-faq-head { text-align: center; margin-bottom: 28px; }
.lb-faq-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: #0d1b3e;
  letter-spacing: -.025em; margin: 0 0 10px; }
.lb-faq-head p { font-size: .95rem; color: #6b7c99; margin: 0; }
.lb-faq details { background: #fff; border: 1px solid #e6ebf5; border-radius: .9rem;
  padding: 1.05rem 1.35rem; margin-bottom: .7rem; transition: border-color .15s, box-shadow .15s; }
.lb-faq details:hover { border-color: #d3ddf0; }
.lb-faq details[open] { border-color: #d0ddf5; box-shadow: 0 6px 22px rgba(63,120,224,.07); }
.lb-faq summary { position: relative; font-weight: 700; color: #21293c; font-size: .95rem;
  cursor: pointer; list-style: none; padding-right: 28px; }
.lb-faq summary::-webkit-details-marker { display: none; }
/* chevron, rotated when open — a plain <details> gives no affordance on its own */
.lb-faq summary::after { content: ""; position: absolute; right: 2px; top: 50%; width: 8px; height: 8px;
  margin-top: -5px; border-right: 2px solid #9fb0d0; border-bottom: 2px solid #9fb0d0;
  transform: rotate(45deg); transition: transform .18s, border-color .18s; }
.lb-faq details[open] summary { color: #3f78e0; }
.lb-faq details[open] summary::after { transform: rotate(-135deg); border-color: #3f78e0; }
.lb-faq summary:focus-visible { outline: 2px solid #3f78e0; outline-offset: 3px; border-radius: 4px; }
.lb-faq p { font-size: .92rem; color: #5a6a86; line-height: 1.7; margin: .8rem 0 0; }
.lb-faq p strong { color: #0d1b3e; font-weight: 600; }
.lb-faq p em { font-style: normal; color: #0d1b3e; font-weight: 600; }
.lb-faq-foot { text-align: center; font-size: .88rem; color: #6b7c99; margin-top: 1.6rem; }
.lb-faq-foot a { color: #3f78e0; font-weight: 600; }

/* The public shell (base_public.html) wraps page content in a flex column, so
   every top-level section here is a flex item. Flex items default to
   min-width:auto, which makes them grow to their widest content — a wide table
   would stretch the page instead of scrolling inside .tablewrap. min-width:0
   is what lets the inner scroll container do its job. */
.lg-hero, .lg-wrap, .lg-article, .lg-faq-band, .lg-cta-band { min-width: 0; }
/* `width:100%` makes the width definite. Without it, `margin:0 auto` on a flex
   item makes it fit-content sized, so a wide child stretches the page instead
   of scrolling inside .tablewrap. */
.lg-wrap, .lg-article { width: 100%; }

/* -- Guide hub / article shared shell -- */
.lg-hero { background: linear-gradient(180deg,#f7f9ff 0%,#fff 100%); padding: 64px 24px 52px;
  text-align: center; position: relative; overflow: hidden; border-bottom: 1px solid #eef2fa; }
.lg-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% -8%, rgba(63,120,224,.10), transparent 60%); }
.lg-hero-in { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.lg-crumb { font-size: .76rem; font-weight: 600; color: #7285a1; margin-bottom: 18px; }
.lg-crumb a { color: #7b8fad; text-decoration: none; }
.lg-crumb a:hover { color: #3f78e0; }
.lg-crumb .sep { margin: 0 8px; color: #d0d9e8; }
.lg-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: #3f78e0; background: #eef3fd; padding: 5px 14px;
  border-radius: 20px; margin-bottom: 16px; }
.lg-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: #0d1b3e;
  letter-spacing: -.03em; line-height: 1.16; margin: 0 0 16px; }
.lg-hero h1 em { font-style: normal; color: #3f78e0; }
.lg-hero .lead { font-size: 1.02rem; color: #6b7c99; line-height: 1.7; margin: 0 auto; max-width: 620px; }
.lg-wrap { max-width: 980px; margin: 0 auto; padding: 56px 24px 24px; }

/* -- Hub: grouped article cards -- */
.lg-group { margin-bottom: 44px; }
.lg-group-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px;
  padding-bottom: 12px; border-bottom: 1px solid #e6ebf5; }
.lg-group-h h2 { font-size: 1.15rem; font-weight: 700; color: #0d1b3e; margin: 0; letter-spacing: -.015em; }
.lg-group-h .count { font-size: .74rem; font-weight: 600; color: #9fb0d0; }
.lg-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.lg-card { display: block; background: #fff; border: 1px solid #e6ebf5; border-radius: 14px;
  padding: 18px 20px; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.lg-card:hover { transform: translateY(-2px); border-color: #d0ddf5;
  box-shadow: 0 12px 30px rgba(63,120,224,.10); }
.lg-card h3 { font-size: .98rem; font-weight: 700; color: #0d1b3e; margin: 0 0 6px; line-height: 1.35; }
.lg-card p { font-size: .84rem; color: #6b7c99; line-height: 1.6; margin: 0; }
.lg-card .vid { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: #3f78e0; margin-top: 10px; }
.lg-empty { text-align: center; color: #96a1b5; padding: 32px 0; font-size: .92rem; }

/* -- Hub: FAQ band -- */
.lg-faq-band { background: #f7f9ff; border-top: 1px solid #e9eefb; border-bottom: 1px solid #e9eefb;
  padding: 60px 24px; margin-top: 20px; }

/* -- Article page -- */
.lg-article { max-width: 780px; margin: 0 auto; padding: 52px 24px 20px; }
.lg-article .lg-body { font-size: 1.02rem; color: #5a6a82; line-height: 1.85; }
.lg-article .lg-body > *:first-child { margin-top: 0; }
.lg-body h2 { font-size: 1.35rem; font-weight: 700; color: #0d1b3e; margin: 2.1rem 0 .85rem;
  line-height: 1.28; letter-spacing: -.02em; }
.lg-body h3 { font-size: 1.08rem; font-weight: 600; color: #0d1b3e; margin: 1.7rem 0 .6rem; }
.lg-body p { margin: 0 0 1.1rem; }
.lg-body ul, .lg-body ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.lg-body ul { list-style: disc; } .lg-body ol { list-style: decimal; }
.lg-body li { margin-bottom: .5rem; line-height: 1.75; }
.lg-body strong { color: #0d1b3e; font-weight: 600; }
.lg-body a { color: #3f78e0; text-decoration: underline; text-underline-offset: 2px; }
.lg-body kbd { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82em; font-weight: 700;
  background: #eef3fd; border: 1px solid #d5e2f8; border-bottom-width: 2px; border-radius: 6px;
  padding: 1px 7px; color: #2b5bb5; }
.lg-body blockquote { border-left: 4px solid #3f78e0; padding: 1.1rem 1.6rem; margin: 1.7rem 0;
  background: #f7f9ff; border-radius: 0 12px 12px 0; color: #5a6a82; }
/* Numbered walkthrough steps — the main shape these articles take. */
.lg-body ol.steps { list-style: none; padding-left: 0; counter-reset: step; }
.lg-body ol.steps > li { counter-increment: step; position: relative; padding-left: 44px;
  margin-bottom: 1.05rem; }
.lg-body ol.steps > li::before { content: counter(step); position: absolute; left: 0; top: 1px;
  width: 28px; height: 28px; border-radius: 9px; background: #e0e9fa; color: #3f78e0;
  font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center; }
.lg-body .note { background: #edf2fc; border: 1px solid #d0ddf5; border-radius: 14px;
  padding: 1.1rem 1.4rem; margin: 1.7rem 0; font-size: .95rem; }
.lg-body .note strong { color: #2b5bb5; }
.lg-body table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: .92rem;
  border: 1px solid #e6ebf5; border-radius: 12px; overflow: hidden; }
.lg-body th { background: #edf2fc; color: #0d1b3e; font-weight: 600; padding: .8rem 1rem;
  text-align: left; border-bottom: 2px solid #e2e8f4; }
.lg-body td { padding: .68rem 1rem; border-bottom: 1px solid #e6ebf5; }
/* Wide tables must scroll inside the article, not push the page sideways. */
.lg-body .tablewrap { overflow-x: auto; }

/* Video slot — 16:9, only rendered when an article actually has a video. */
.lg-video { position: relative; width: 100%; padding-top: 56.25%; margin: 0 0 32px;
  background: #0b1120; border: 1px solid #e6ebf5; border-radius: 14px; overflow: hidden; }
.lg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Screenshot slot. `max-width` rather than `width` so a narrow portrait capture
   (the order ticket) sits at its natural size instead of being upscaled to the
   column, while a wide one (the top bar) still scales down to fit. */
.lg-shot { margin: 1.8rem 0; }
.lg-shot img { display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid #e6ebf5; border-radius: 12px; background: #17191e; }
.lg-shot figcaption { font-size: .8rem; color: #96a1b5; text-align: center; margin-top: 8px; }
/* A full-width UI strip (the top bar, the position bar) is unreadable squeezed
   into the 780px text column, so let it break out — but only where there is
   room for it. Negative margins rather than 100vw: vw includes the scrollbar
   and would push the page sideways. */
@media (min-width: 1160px) {
  .lg-shot.wide { margin-left: -150px; margin-right: -150px; }
}

/* Article footer: siblings + CTA + the standing disclaimer */
.lg-next { margin-top: 44px; padding-top: 28px; border-top: 1px solid #e6ebf5; }
.lg-next .h { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #9fb0d0; margin-bottom: 14px; }
.lg-next ul { list-style: none; padding: 0; margin: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 10px; }
.lg-next a { display: block; background: #f7f9ff; border: 1px solid #e6ebf5; border-radius: 11px;
  padding: 12px 15px; font-size: .89rem; font-weight: 600; color: #0d1b3e; text-decoration: none;
  transition: border-color .15s, background .15s; }
.lg-next a:hover { background: #fff; border-color: #d0ddf5; color: #3f78e0; }
.lg-cta-band { text-align: center; background: #f7f9ff; border-top: 1px solid #e9eefb;
  padding: 56px 24px; margin-top: 48px; }
.lg-cta-band h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 700; color: #0d1b3e; margin: 0 0 10px; }
.lg-cta-band h2 em { font-style: normal; color: #3f78e0; }
.lg-cta-band p { color: #6b7c99; max-width: 480px; margin: 0 auto 24px; line-height: 1.65; }
.lg-note { text-align: center; font-size: .8rem; color: #96a1b5; margin-top: 22px;
  max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.6; }

@media (max-width: 720px) {
  .lg-cards, .lg-next ul { grid-template-columns: 1fr; }
  .lg-wrap, .lg-article { padding-left: 18px; padding-right: 18px; }
  .lg-hero { padding: 48px 18px 40px; }
}

/* Primary button for the guide pages — .tl-cta lives in the landing page's
   own <style> island, so these pages need their own copy of it. */
.lg-btn { display: inline-flex; align-items: center; gap: 9px; background: #3f78e0; color: #fff;
  font-size: 1.02rem; font-weight: 700; padding: 15px 34px; border-radius: 12px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(63,120,224,.32); transition: transform .15s, background .15s; }
.lg-btn:hover { background: #2960c8; color: #fff; transform: translateY(-2px); }