/* x1-learn - /learn (2026-10-01). Signature: two routes to a decision (Counsel lane, FineShield lane),
   each stop a link to the section that explains it. Every rule scoped under .x1-learn. */

.x1-learn .ln-dot {display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; flex: none;}
.x1-learn .ln-dot-ink {background: var(--ink);}
.x1-learn .ln-dot-acc {background: var(--accent);}
.x1-learn .ln-eb {display: flex; align-items: center; gap: .6rem; color: var(--muted);}

/* --- the route band --- */
.x1-learn .ln-route-sec {padding-bottom: 0; margin-top: calc(-1 * var(--section) + var(--stack-l));}
.x1-learn .panel video {height: auto; aspect-ratio: 16 / 9;}
.x1-learn .ln-route {background: var(--tint); border-radius: calc(var(--radius) + 6px);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3.5rem); display: grid; gap: clamp(1.75rem, 1rem + 2vw, 2.75rem);}
.x1-learn .ln-lane {display: grid; grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr); align-items: center; gap: 1.5rem var(--col-gap);}
.x1-learn .ln-lane + .ln-lane {padding-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); border-top: 1px solid var(--rule);}
.x1-learn .ln-lane-h {display: flex; align-items: center; gap: .7rem;
  font: 400 clamp(1.375rem, 1.15rem + .8vw, 1.875rem)/1.15 var(--serif); color: var(--ink); letter-spacing: -.01em;}
.x1-learn .ln-stops {list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; counter-reset: none;}
.x1-learn .ln-stops > li {position: relative; flex: 1 1 0; min-width: 0; padding-top: 1.6rem;}
/* the line running through the stops */
.x1-learn .ln-stops > li::before {content: ""; position: absolute; top: .5rem; left: 0; right: 0; height: 1px; background: rgba(0,0,0,.22);}
.x1-learn .ln-stops > li:first-child::before {left: .5rem;}
.x1-learn .ln-stops > li:last-child::before {right: auto; width: .5rem;}
/* the node */
.x1-learn .ln-stops > li::after {content: ""; position: absolute; top: 0; left: 0; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--tint); box-shadow: inset 0 0 0 1px var(--ink);}
.x1-learn .ln-stops > li.ln-end::after {background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-soft);}
.x1-learn .ln-stops a {display: inline-block; padding-right: .75rem; font: 500 1.0625rem/1.35 var(--sans); color: var(--ink);
  text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease);}
.x1-learn .ln-stops a:hover {border-bottom-color: var(--accent);}
.x1-learn .ln-stops .ln-end a {font-weight: 600;}

/* --- FineShield flag + pull line --- */
.x1-learn .ln-aha {margin: var(--stack-l) 0 0; display: flex; justify-content: center;}
.x1-learn .ln-aha .quote-big {max-width: 26ch;}

/* --- drafts vs meetings --- */
.x1-learn .ln-two {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap);}
.x1-learn .ln-card {background: var(--surface); border-radius: var(--radius); padding: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);
  box-shadow: inset 0 0 0 1px var(--rule); font-size: var(--fs-lede); line-height: 1.5; color: var(--text);}
.x1-learn .ln-card-live {background: var(--tint); box-shadow: none;}
.x1-learn .ln-ico {display: block; width: 2rem; height: 2rem; margin-bottom: 1.1rem; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round;}
.x1-learn .ln-card-live .ln-ico {stroke: var(--accent);}
.x1-learn .ln-note {margin-top: var(--stack-m); max-width: var(--measure); color: var(--muted);}

/* --- setup scope card --- */
.x1-learn .ln-scope {background: var(--tint); border-radius: calc(var(--radius) + 6px); padding: clamp(1.5rem, 1rem + 2vw, 3rem);}
.x1-learn .ln-scope-k {font: 400 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.2 var(--serif); color: var(--ink); margin-bottom: 1.25rem; letter-spacing: -.01em;}
.x1-learn .ln-scope-list > li {display: flex; align-items: center; gap: .9rem; padding-block: .95rem; border-top: 1px solid var(--rule);
  font-weight: 500; color: var(--ink);}
.x1-learn .ln-scope-list > li:last-child {border-bottom: 1px solid var(--rule);}
.x1-learn .ln-scope-list > li::before {content: ""; width: 1.1rem; height: 1.1rem; border-radius: 4px; flex: none;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.35); background: var(--surface);}

.x1-learn .ln-faq-g {align-items: start;}

@media (max-width: 960px) {
  .x1-learn .ln-lane {grid-template-columns: 1fr;}
}
@media (max-width: 700px) {
  .x1-learn .ln-two {grid-template-columns: 1fr;}
  /* stops run downwards on a phone */
  .x1-learn .ln-stops {flex-direction: column;}
  .x1-learn .ln-stops > li {padding: 0 0 1.1rem 2rem; flex: none;}
  .x1-learn .ln-stops > li:last-child {padding-bottom: 0;}
  .x1-learn .ln-stops > li::before {top: 0; bottom: 0; left: .5rem; right: auto; width: 1px; height: auto;}
  .x1-learn .ln-stops > li:first-child::before {left: .5rem; top: .5rem;}
  .x1-learn .ln-stops > li:last-child::before {width: 1px; bottom: auto; height: .5rem;}
  .x1-learn .ln-stops > li::after {top: .15rem;}
}
@media (prefers-reduced-motion: reduce) {
  .x1-learn .ln-stops a {transition: none;}
}