/* Product "Learn" pages — reuses legal.css's hero/TOC/section layout,
   adds the active-page state and the closing CTA card. */

.legal-toc a.is-current{ color:var(--brass-deep); border-color:var(--brass); font-weight:600; }

.learn-cta{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:var(--chrome); border-radius:var(--radius); padding:26px 30px; margin-top:8px;
}
.learn-cta h3{ font-family:var(--font-display); font-size:18px; font-weight:600; color:#FFFFFF; margin-bottom:4px; }
.learn-cta p{ font-size:13px; color:rgba(255,255,255,0.6); }

/* ---- Live data preview ----
   .learn-preview-inner holds one real row fetched straight from the DB
   (see LearnController::livePreview()) -- shown fully legible, not
   blurred out, because the entire point is proving this is genuinely
   live data before asking for signup; hiding the one number defeats
   that. The "lock" is .learn-preview-foot, a normal footer bar below
   the visible data, not an overlay on top of it. pointer-events:none
   on .learn-preview-inner just means a click on the numbers still
   falls through to .learn-preview-stretch (the full-card link to Sign
   Up) instead of trying to select text; .learn-preview-signin
   re-enables pointer-events so it stays independently clickable to its
   own (Sign In) destination despite the stretch link sitting under it. */
.lp-wrap{ max-width:1000px; margin:0 auto; padding:32px 28px 0; }
.learn-preview{
  position:relative; overflow:hidden;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px 0; margin-bottom:8px; text-align:center;
}
.learn-preview-stretch{ position:absolute; inset:0; z-index:1; }
.learn-preview-label{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-bottom:22px;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sage-deep);
}
/* Scoped to just this label's dot, not .dot-live itself -- that class is
   also the sidebar's "Live" status indicator in the authenticated app,
   which shouldn't start blinking as a side effect of this. */
.learn-preview-label .dot-live{ animation:lp-blink 1.4s ease-in-out infinite; }
@keyframes lp-blink{
  0%, 100%{ opacity:1; }
  50%{ opacity:.25; }
}

.learn-preview-inner{ pointer-events:none; user-select:none; padding-bottom:26px; }
.lp-row{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.lp-flag-lg{ width:36px; height:25px; border-radius:4px; box-shadow:0 0 0 1px var(--line); }
.lp-id{ text-align:left; }
.lp-code{ font-family:var(--font-mono); font-weight:700; font-size:19px; color:var(--ink-900); }
.lp-sub{ font-size:12.5px; color:var(--ink-500); margin-top:2px; }
.lp-num{ font-family:var(--font-display); font-weight:700; font-size:34px; color:var(--ink-900); }
.lp-num span{ font-size:14px; font-weight:400; color:var(--ink-500); }
.lp-chg{ font-family:var(--font-mono); font-size:13px; font-weight:600; }
.lp-pos{ color:var(--sage-deep); }
.lp-neg{ color:var(--clay-deep); }

.learn-preview-foot{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; text-align:left;
  border-top:1px solid var(--line); padding:18px 4px; background:var(--paper-sunk);
  margin:0 -28px; padding-left:28px; padding-right:28px;
}
.learn-preview-foot-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:var(--brass-wash); color:var(--brass-deep);
  display:flex; align-items:center; justify-content:center;
}
.learn-preview-foot-icon svg{ width:16px; height:16px; }
.learn-preview-foot p{ flex:1 1 240px; font-size:13px; font-weight:600; color:var(--ink-900); line-height:1.5; margin:0; }
.learn-preview-foot-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.learn-preview-foot .mkt-btn-primary{ pointer-events:none; white-space:nowrap; }
.learn-preview-signin{
  position:relative; z-index:3; pointer-events:auto;
  font-size:12.5px; color:var(--ink-500); text-decoration:underline; white-space:nowrap;
}
.learn-preview-signin:hover{ color:var(--brass-deep); }

@media(max-width:640px){
  .learn-preview{ padding:22px 18px 0; }
  .lp-num{ font-size:28px; }
  /* .learn-preview-foot p's flex:1 1 240px is a WIDTH grow hint for the
     desktop row layout -- once flex-direction flips to column here, the
     same flex-basis applies to HEIGHT instead, which was stretching the
     paragraph to fill most of the card's vertical space and shoving the
     buttons down below a large gap. flex:none resets it back to its
     natural height in the stacked layout. */
  .learn-preview-foot{ flex-direction:column; align-items:flex-start; margin:0 -18px; padding-left:18px; padding-right:18px; }
  .learn-preview-foot p{ flex:none; }
  .learn-preview-foot-actions{ width:100%; justify-content:space-between; }
}