/* ================================================================
   learn-pages.css: Glossary, Answers, Guides design system.
   All selectors are prefixed learn- to avoid collisions with
   the shared Webflow stylesheet and other page-specific CSS.
   ================================================================ */

/* ---------- Design tokens ---------- */

.learn-main {
  --learn-bg: #0d0e1a;
  --learn-text-1: #f1f2f8;
  --learn-text-2: #9ba3c4;
  --learn-brand: #515fbc;
  --learn-brand-dim: rgba(81, 95, 188, 0.18);
  --learn-brand-glow: rgba(81, 95, 188, 0.28);
  --learn-surface: rgba(255, 255, 255, 0.04);
  --learn-surface-raised: rgba(255, 255, 255, 0.06);
  --learn-border: rgba(255, 255, 255, 0.09);
  --learn-green: #10b981;
  --learn-gap: 48px;

  color: var(--learn-text-1);
  background: var(--learn-bg);
  /* No min-height: 100vh; setting it would push the footer off-screen in tall
     screenshot viewports because the main element would expand to fill the
     full viewport height, deferring the footer beyond the capture window. */
}

@media (max-width: 767px) {
  .learn-main { --learn-gap: 32px; }
}

.learn-main *, .learn-main *::before, .learn-main *::after {
  box-sizing: border-box;
}

/* Ensure anchor targets clear the sticky nav */
.learn-main [id] {
  scroll-margin-top: 100px;
}

/* ---------- Page wrapper: centred container, 56px side gutters ---------- */

/* Centres breadcrumb + article + sidebar as one unit on wide viewports.
   max-width keeps the reading width sane; margin: auto does the centring.
   padding-top provides the gap between the sticky nav and the breadcrumb. */
.learn-page-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 4rem 56px 80px;
}

@media (max-width: 1023.98px) {
  .learn-page-wrap { padding: 4rem 20px 60px; }
}

/* ---------- Two-column article + sidebar grid ---------- */

/* minmax(0, 1fr) lets the article column fill remaining space after the 260px
   sidebar + 56px gap, matching the ~692px reading width at 1280px viewport. */
.learn-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 0 56px;
  align-items: start;
}

@media (max-width: 1023.98px) {
  .learn-article-grid {
    display: block;
  }
}

.learn-article-col {
  min-width: 0; /* prevent grid blowout from long unbreakable strings */
}

/* ---------- Sticky sidebar ---------- */

/* Capped at the viewport height below the nav (100px) with 24px to spare.
   When TOC + CTA card are taller than that, the TOC list scrolls inside its
   box and the card keeps its full height, so the card is always visible. */
.learn-sidebar {
  position: sticky;
  top: 100px; /* clears the fixed nav */
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 124px);
}

@media (max-width: 1023.98px) {
  .learn-sidebar { display: none; }
}

.learn-sidebar-toc {
  display: flex;
  flex-direction: column;
  min-height: 0; /* lets the box shrink below its content height */
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 10px;
  padding: 20px 24px;
}

.learn-toc-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--learn-text-2);
  margin: 0 0 12px;
}

.learn-sidebar-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.learn-sidebar-toc li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.45;
  font-family: inherit;
  color: var(--learn-text-2);
}

.learn-sidebar-toc a {
  color: var(--learn-text-2);
  text-decoration: none;
  transition: color 0.15s;
  display: block;
  padding: 3px 0;
  border-left: 2px solid transparent;
  padding-left: 10px;
}

.learn-sidebar-toc a:hover,
.learn-sidebar-toc a.is-active {
  color: var(--learn-text-1);
  border-left-color: var(--learn-brand);
}

/* ---------- Breadcrumb ---------- */

.learn-breadcrumb-top {
  padding-bottom: 2rem;
}

@media (max-width: 767px) {
  .learn-breadcrumb-top { padding-bottom: 1.5rem; }
}

/* ---------- Hero / H1 ---------- */

.learn-h1 {
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--learn-text-1);
  /* Reset Webflow's gradient-text trick (h1 { -webkit-text-fill-color:transparent }). */
  -webkit-text-fill-color: currentColor;
  background-image: none;
  background-clip: unset;
  -webkit-background-clip: unset;
  margin: 0 0 16px;
}

/* ---------- Byline ---------- */

.learn-byline {
  font-size: 0.875rem;
  color: var(--learn-text-2);
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  align-items: center;
  margin-bottom: 40px;
  font-family: inherit;
}

.learn-byline-sep {
  color: var(--learn-border);
}

/* ---------- Body typography ---------- */

.learn-content {
  font-size: 18px;
  line-height: 1.65;
  color: var(--learn-text-2);
  /* Use Inter explicitly. Webflow sets font-family on p/li via --typeface--primary,
     but those rules lose to the shared stylesheet when font-family is only "inherit". */
  font-family: var(--typeface--primary);
}

/* Webflow's global h1-h3 rule applies -webkit-text-fill-color:transparent with
   background-clip:text to create gradient text. Our learn-content headings use
   plain colour, so we must reset those properties explicitly; otherwise
   color: is ignored and the heading text is invisible. */
.learn-content h1,
.learn-content h2,
.learn-content h3,
.learn-content h4 {
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

.learn-content p {
  margin: 0 0 20px;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-family: inherit;
  overflow-wrap: anywhere;
}

/* Lists: must match paragraph text exactly. Webflow's base CSS can override
   font-size and color on li elements, so we set all properties explicitly. */
.learn-content ul,
.learn-content ol {
  margin: 0 0 20px 0;
  padding-left: 24px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--learn-text-2);
  font-family: inherit;
}

.learn-content li {
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--learn-text-2);
  font-family: inherit;
  overflow-wrap: anywhere;
}

.learn-content h2 {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--learn-text-1);
  margin: 48px 0 20px;
}

.learn-content h2:first-child {
  margin-top: 0;
}
@media (max-width: 1023.98px) {
  .learn-content h2 { font-size: 24px; }
  .learn-content h3 { font-size: 20px; }
}

/* ---------- H3: FAQ question card treatment ---------- */

/* H3 elements in this body are exclusively FAQ questions.
   Card style gives each question visual separation so the list scans easily. */
.learn-content h3 {
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--learn-text-1);
  /* font-family deliberately omitted: Webflow global h3 applies Aeonik Pro */
  /* card */
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-left: 3px solid var(--learn-brand);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
  margin: 32px 0 12px;
}

.learn-content h4 {
  font-size: 17px;
  font-weight: 600;
  color: var(--learn-text-1);
  /* font-family deliberately omitted: Webflow global h4 applies Aeonik Pro */
  margin: 24px 0 10px;
}

.learn-content strong {
  color: var(--learn-text-1);
  font-weight: 600;
}

/* Links in content */
.learn-content a {
  color: #818cf8;
  text-decoration: none;
}

.learn-content a:hover {
  text-decoration: underline;
}

/* ---------- Tables ---------- */

.learn-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 24px;
  border-radius: 8px;
  border: 1px solid var(--learn-border);
  /* CSS-only scroll shadow: faint edge glow fades as you reach the boundary */
  background:
    linear-gradient(to right, #0d0e1a 30%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left,  #0d0e1a 30%, transparent) right / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(255, 255, 255, 0.07), transparent) left / 28px 100% no-repeat scroll,
    linear-gradient(to left,  rgba(255, 255, 255, 0.07), transparent) right / 28px 100% no-repeat scroll;
}

@media (max-width: 1023.98px) {
  .learn-content td,
  .learn-content th {
    min-width: 9rem;
  }
}

.learn-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--learn-text-2);
  font-family: inherit;
  min-width: 480px;
}

.learn-content thead {
  background: var(--learn-surface-raised);
}

.learn-content th {
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: var(--learn-text-1);
  font-family: inherit;
  padding: 12px 16px;
  border-bottom: 1px solid var(--learn-border);
  white-space: nowrap;
  overflow-wrap: anywhere;
}

/* Empty first header cell (comparison tables in guides). min-width stops the
   column from collapsing to zero and misaligning the remaining headers. */
.learn-content th:empty {
  min-width: 120px;
}

.learn-content td {
  padding: 10px 16px;
  font-size: 14px;
  color: var(--learn-text-2);
  font-family: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: top;
  overflow-wrap: anywhere;
}

.learn-content tr:last-child td {
  border-bottom: none;
}

/* Alternating row tones for readability */
.learn-content tbody tr:nth-child(even) {
  background: var(--learn-surface);
}

/* ---------- FAQ heading ---------- */

.learn-content h2[id^="faq"] {
  color: var(--learn-text-1);
}

/* ---------- Related and Sources: visibly secondary ---------- */

.learn-content h2#sources,
.learn-content h2#related {
  font-size: 18px;
  color: var(--learn-text-2);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 40px;
}

/* ---------- TL;DR box ---------- */

.learn-tldr {
  background: var(--learn-brand-dim);
  border-left: 3px solid var(--learn-brand);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 0 0 32px;
}

/* Two-class selector: the label is a <p> inside .learn-content, whose p rule
   would otherwise override its size, colour and margin. */
.learn-tldr .learn-tldr-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #818cf8;
  margin: 0 0 12px;
}

.learn-tldr ul {
  margin: 0;
  padding-left: 20px;
  color: var(--learn-text-1);
  font-size: 16px;
  line-height: 1.55;
  font-family: inherit;
}

.learn-tldr li {
  margin-bottom: 8px;
  font-size: 16px;
  line-height: 1.55;
  font-family: inherit;
  color: var(--learn-text-1);
}

/* ---------- In-body guide TOC (nav.learn-toc) ---------- */

/* Rendered by the parser into the body HTML. Shown only below desktop width
   because the sidebar "On this page" nav serves the same role on wider viewports. */
.learn-content .learn-toc {
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 0 0 32px;
}

/* Two-class selector: the <p class="learn-toc-label"> sits inside .learn-content,
   so .learn-content p would otherwise override its size, colour and margin.
   Mirrors the same fix applied to .learn-tldr .learn-tldr-label. */
.learn-toc .learn-toc-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--learn-text-2);
  margin: 0 0 10px;
}

.learn-content .learn-toc ol {
  margin: 0;
  padding-left: 20px;
  color: var(--learn-text-2);
  font-size: 15px;
  line-height: 1.5;
}

.learn-content .learn-toc li {
  margin-bottom: 4px;
  font-size: 15px;
  color: var(--learn-text-2);
}

.learn-content .learn-toc a {
  color: var(--learn-brand);
  text-decoration: none;
}

.learn-content .learn-toc a:hover {
  text-decoration: underline;
}

/* ---------- Go deeper rows ---------- */

/* Rendered by the parser as a small row after each section, pointing to related
   content. Visually distinct from body text: surface background, secondary label. */
.learn-go-deeper {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 32px;
  padding: 10px 14px;
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.4;
}

.learn-go-deeper-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--learn-text-2);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Two-class selector: links in .learn-go-deeper sit inside .learn-content, so
   .learn-content a would recolour them with the body link colour. */
.learn-go-deeper a {
  color: #818cf8;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  display: inline-block;
}

.learn-go-deeper a:hover {
  text-decoration: underline;
}
@media (max-width: 1023.98px) {
  .learn-go-deeper {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ---------- Inline CTA button ---------- */

.learn-cta-inline {
  text-align: center;
  margin: 32px 0;
}

/* The look (pill, gradient, border, size) comes from .button.w-button in the
   shared stylesheet, the same as the sidebar card and product band buttons.
   inline-flex keeps it content-width so text-align centres it; .button's own
   display: flex would stretch it across the column. The two-class selectors
   beat .learn-content a and a:hover, which would otherwise recolour and
   underline the label. */
.learn-content .learn-cta-btn {
  display: inline-flex;
}

.learn-content .learn-cta-btn,
.learn-content .learn-cta-btn:hover {
  color: var(--text--primary);
  text-decoration: none;
}

/* ---------- Early CTA card (templates/learn/_cta_card.html) ---------- */

.learn-cta-card {
  background: linear-gradient(180deg, var(--learn-brand-dim), var(--learn-surface) 70%);
  border: 1px solid var(--learn-border);
  border-radius: 10px;
  padding: 20px;
}

.learn-cta-card--sidebar {
  flex-shrink: 0;
}

.learn-cta-card--inline {
  margin: 32px 0;
}

/* One merged block: hide in-body TOC and inline CTA card on desktop because
   the sidebar serves both roles at 1024px and above. */
@media (min-width: 1024px) {
  .learn-content .learn-toc { display: none; }
  .learn-cta-card--inline { display: none; }
}

/* Two-class selectors: the inline card sits inside .learn-content, whose
   p, a and a:hover rules would otherwise restyle it. */
.learn-cta-card .learn-cta-card-title {
  margin: 0 0 8px;
  font-family: var(--typeface--secondary);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--learn-text-1);
  text-wrap: balance;
}

.learn-cta-card .learn-cta-card-text {
  margin: 0 0 16px;
  font-family: var(--typeface--primary);
  font-size: 14px;
  line-height: 1.5;
  color: var(--learn-text-2);
}

.learn-cta-card .learn-cta-card-btn,
.learn-cta-card .learn-cta-card-btn:hover {
  color: var(--text--primary);
  text-decoration: none;
}

.learn-cta-card--sidebar .learn-cta-card-btn {
  display: flex;
  width: 100%;
}

/* ---------- Separators ---------- */

.learn-divider {
  border: none;
  border-top: 1px solid var(--learn-border);
  margin: var(--learn-gap) 0;
}

/* ================================================================
   Hub pages: /glossary, /answers, /guides
   ================================================================ */

/* Full-width layout for hub pages — no sidebar grid.
   .learn-hub-wrap overrides the detail page's padded wrap only where
   the hub needs a different bottom spacing. */
.learn-hub-wrap {
  padding-bottom: 96px;
}

/* Hub intro paragraph sits directly under the H1. */
.learn-hub-intro {
  font-size: 18px;
  line-height: 1.65;
  color: var(--learn-text-2);
  margin: 0 0 56px;
  max-width: 700px;
  font-family: var(--typeface--primary);
}

/* ---------- Glossary hub: A-Z letter headings ---------- */

/* Letter heading acts as a section divider — small, branded, not competing with H1. */
.learn-hub-letter {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--learn-brand);
  /* Webflow global h2 rule sets -webkit-text-fill-color:transparent; reset it. */
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--learn-border);
}

.learn-hub-letter:first-child {
  margin-top: 0;
}

/* ---------- Glossary hub: term card grid ---------- */

/* Two columns on desktop so more terms fit per screen without becoming unreadable.
   Single column on mobile for comfortable reading width. */
.learn-hub-terms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .learn-hub-terms {
    grid-template-columns: 1fr;
  }
}

/* Card is an <a> element; display:block removes the default inline flow,
   color/text-decoration inherit keeps the card text unaffected by the link reset. */
.learn-term-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.15s, background 0.15s;
}

.learn-term-card:hover,
.learn-term-card:focus-visible {
  border-color: var(--learn-brand);
  background: var(--learn-brand-dim);
}

.learn-term-card:focus-visible {
  outline: 2px solid var(--learn-brand);
  outline-offset: 2px;
}

/* Webflow global h3 rule sets -webkit-text-fill-color:transparent; reset it.
   #818cf8 is the same tinted indigo used for in-body links — visible on the
   dark card surface without washing out on hover. */
.learn-term-card-name {
  font-size: 17px;
  font-weight: 600;
  color: #818cf8;
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  margin: 0 0 8px;
}

.learn-term-card:hover .learn-term-card-name,
.learn-term-card:focus-visible .learn-term-card-name {
  text-decoration: underline;
}

.learn-term-card-def {
  font-size: 14px;
  line-height: 1.55;
  color: var(--learn-text-2);
  margin: 0;
  font-family: var(--typeface--primary);
}

/* ---------- Answers hub: topic sections ---------- */

.learn-hub-topic {
  margin-bottom: 56px;
}

.learn-hub-topic:last-child {
  margin-bottom: 0;
}

/* Webflow global h2 rule sets -webkit-text-fill-color:transparent; reset it. */
.learn-hub-topic-heading {
  font-size: clamp(18px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--learn-text-1);
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--learn-border);
}

/* Two-column card grid — same rhythm as .learn-hub-terms on the glossary hub.
   At 1024px and above: 2 columns. Below: 1 column. */
.learn-hub-qa-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 1023.98px) {
  .learn-hub-qa-grid {
    grid-template-columns: 1fr;
  }
}

/* Each answer card is a block <a>. colour/text-decoration inherit prevents the
   browser default link styles from bleeding into the card text. */
.learn-hub-qa-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 8px;
  padding: 20px;
  transition: border-color 0.15s, background 0.15s;
}

.learn-hub-qa-card:hover,
.learn-hub-qa-card:focus-visible {
  border-color: var(--learn-brand);
  background: var(--learn-brand-dim);
}

.learn-hub-qa-card:focus-visible {
  outline: 2px solid var(--learn-brand);
  outline-offset: 2px;
}

/* Question text mirrors .learn-term-card-name: brand-tinted, underlined on hover. */
.learn-hub-qa-question {
  font-size: 17px;
  font-weight: 600;
  color: #818cf8;
  margin: 0 0 8px;
  font-family: var(--typeface--secondary);
}

.learn-hub-qa-card:hover .learn-hub-qa-question,
.learn-hub-qa-card:focus-visible .learn-hub-qa-question {
  text-decoration: underline;
}

.learn-hub-qa-answer {
  font-size: 15px;
  line-height: 1.6;
  color: var(--learn-text-2);
  margin: 0;
  font-family: var(--typeface--primary);
}

/* ---------- Guides hub: card row ---------- */

/* Three cards on desktop, two on tablet, one on mobile. */
.learn-guide-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .learn-guide-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .learn-guide-cards {
    grid-template-columns: 1fr;
  }
}

.learn-guide-card {
  background: var(--learn-surface);
  border: 1px solid var(--learn-border);
  border-radius: 10px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, background 0.15s;
}

.learn-guide-card:hover {
  border-color: var(--learn-brand);
  background: var(--learn-brand-dim);
}

/* Webflow global h2 rule sets -webkit-text-fill-color:transparent; reset it. */
.learn-guide-card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--learn-text-1);
  -webkit-text-fill-color: currentColor;
  background-image: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  margin: 0 0 12px;
  line-height: 1.25;
}

.learn-guide-card-title a {
  color: inherit;
  text-decoration: none;
}

.learn-guide-card-title a:hover {
  color: var(--learn-brand);
}

.learn-guide-card-lead {
  font-size: 15px;
  line-height: 1.6;
  color: var(--learn-text-2);
  margin: 0 0 20px;
  flex: 1;
  font-family: var(--typeface--primary);
}

.learn-guide-card-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--learn-brand);
  text-decoration: none;
  margin-top: auto;
}

.learn-guide-card-link:hover {
  text-decoration: underline;
}

/* ---------- Product band stat captions on learn pages ---------- */

/* .lpa-band-stat-label is #4b5563 in landing-page-analyzer.css — low contrast on
   the band's dark card (#101020). Scoped to learn pages via a wrapper div added
   in _learn_base.html. #9ba3c4 (our --learn-text-2) gives > 7:1 contrast. */
.learn-band-wrap .lpa-band-stat-label {
  color: #9ba3c4;
}