/* Learn-only layout: shared product guides retain their existing styles. */
body[data-section="learn"] .article { font-size: 1.025rem; line-height: 1.75; }
body[data-section="learn"] .article h2 { margin-top: 2.2rem; line-height: 1.3; }
body[data-section="learn"] .article h3 { margin: .35rem 0 .55rem; line-height: 1.35; font-size: 1.12rem; }
body[data-section="learn"] .article p { margin: .7rem 0 1rem; }
body[data-section="learn"] .article li + li { margin-top: .45rem; }
body[data-section="learn"] .article :is(th,td) + :is(th,td) { border-left: 1px solid rgba(163,173,191,.22); }
body[data-section="learn"] .article td { vertical-align: top; min-width: 7rem; }
body[data-section="learn"] .article .shot { max-width: 100%; margin: 1.25rem 0 1.8rem; }
body[data-section="learn"] .shot-frame { display: block; width: 100%; }
body[data-section="learn"] .shot-frame img { width: 100%; height: auto; max-height: none; }
body[data-section="learn"] .shot figcaption p { margin: .3rem 0 0; line-height: 1.6; }
.learn-principle,.learn-example { border: 1px solid #35445a; border-left: 3px solid #59d9c9; border-radius: 0 14px 14px 0; padding: 1rem 1.15rem; margin: 1.3rem 0; background: linear-gradient(115deg,rgba(62,224,197,.07),rgba(139,92,246,.06)); }
.learn-principle > strong { color: #80eadb; }
.learn-example { border-left-color: #c4a5ff; background: rgba(139,92,246,.07); }
.learn-example > strong { color: #ccb4ff; }
body[data-section="learn"] :is(.learn-principle,.learn-example) p:last-child { margin-bottom: 0; }
.learn-path,.learn-two,.learn-layer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .9rem; margin: 1.1rem 0 1.6rem; }
.learn-path > a,.learn-panel { --learn-accent:#a58aff; min-width: 0; padding: 1.1rem; border: 1px solid #30384a; border-top: 2px solid var(--learn-accent); border-radius: 14px; background: #111521; }
.learn-path > a { display: flex; flex-direction: column; text-decoration: none; color: #e9edf5; transition: border-color .15s,background .15s; }
.learn-path > a:hover { background: #181b2c; border-color: #9c7bed; }
.learn-path > a:focus-visible { outline: 2px solid #b9a0ff; outline-offset: 4px; }
.learn-path > a:nth-child(3n + 2) { --learn-accent:#50d4d9; }
.learn-path > a:nth-child(3n) { --learn-accent:#e6bf61; }
.learn-path span,.learn-panel > span { display: block; color: var(--learn-accent); font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.learn-path strong { display: block; margin-top: .4rem; font-size: 1.1rem; line-height: 1.4; }
body[data-section="learn"] .learn-path p { color: #aeb8ca; line-height: 1.6; font-size: .93rem; margin: .5rem 0 0; }
body[data-section="learn"] .learn-panel p { margin: .5rem 0 0; color: #b7c1d2; line-height: 1.65; }
.learn-panel small { display: block; color: var(--learn-accent); font-size: .82rem; margin-top: .7rem; }
.learn-green { --learn-accent:#57dba4; }
.learn-red { --learn-accent:#fa8195; }
.learn-cyan { --learn-accent:#51d2e0; }
.learn-gold { --learn-accent:#edc768; }
.learn-violet { --learn-accent:#b39af7; }
.learn-reading { padding-left: 1.4rem; }
body[data-section="learn"] .learn-reading p { font-size: .95rem; margin: .2rem 0 1rem; color: #acb7c8; }
.learn-clock { border-left: 2px solid #54d5d4; padding: .1rem 0 .1rem 1rem; margin: 1.1rem 0; }
.learn-ladder,.learn-expiry-roles,.learn-aggregation { margin: 1.2rem 0 1.7rem; }
.learn-ladder-row { --learn-accent:#c5cddd; display:grid; grid-template-columns:5.25rem minmax(0,1fr); gap:1rem; align-items:center; padding:.8rem 1rem; border-bottom:1px solid #303849; border-left:3px solid var(--learn-accent); background:#111520; }
.learn-ladder-row.learn-green { --learn-accent:#57dba4; }
.learn-ladder-row.learn-cyan { --learn-accent:#51d2e0; }
.learn-ladder-row.learn-red { --learn-accent:#fa8195; }
.learn-ladder-row > strong { color:var(--learn-accent); }
.learn-ladder-row small { display:block; color:#aeb8ca; font-size:.84rem; }
.learn-expiry-roles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; }
.learn-expiry-roles .role-card { position:relative; display:flex; flex-direction:column; gap:.45rem; padding:1.1rem 1.2rem 1.15rem; background:linear-gradient(155deg, rgba(22,29,45,.92), rgba(14,19,31,.95)); border:1px solid rgba(255,255,255,.1); border-radius:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden; }
.learn-expiry-roles .role-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; border-radius:14px 14px 0 0; }
.learn-expiry-roles .role-card--zero { border-color:rgba(245,193,108,.32); }
.learn-expiry-roles .role-card--zero::before { background:linear-gradient(90deg,#f59e0b,#fde047); }
.learn-expiry-roles .role-card--one { border-color:rgba(84,209,232,.3); }
.learn-expiry-roles .role-card--one::before { background:linear-gradient(90deg,#06b6d4,#67e8f9); }
.learn-expiry-roles .role-card--weekly { border-color:rgba(99,229,196,.3); }
.learn-expiry-roles .role-card--weekly::before { background:linear-gradient(90deg,#10b981,#6ee7b7); }
.learn-expiry-roles .role-card--monthly { border-color:rgba(189,164,255,.32); }
.learn-expiry-roles .role-card--monthly::before { background:linear-gradient(90deg,#8b5cf6,#c4b5fd); }
.learn-expiry-roles .role-card--all { grid-column:1/-1; border-color:rgba(244,114,182,.32); background:linear-gradient(155deg, rgba(31,23,46,.92), rgba(15,20,33,.95)); }
.learn-expiry-roles .role-card--all::before { background:linear-gradient(90deg,#ec4899,#a855f7,#38bdf8); }
.learn-expiry-roles .role-card__top { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.15rem; }
.learn-expiry-roles .role-pill-group { display:inline-flex; gap:.32rem; flex-wrap:wrap; }
.learn-expiry-roles .role-pill { display:inline-flex; align-items:center; justify-content:center; min-width:2rem; height:1.7rem; padding:0 .55rem; border-radius:7px; font-family:var(--mono); font-size:.82rem; font-weight:800; letter-spacing:.03em; border:1px solid transparent; }
.learn-expiry-roles .role-pill--zero { background:rgba(245,158,11,.18); color:#fde68a; border-color:rgba(251,191,36,.45); }
.learn-expiry-roles .role-pill--one { background:rgba(6,182,212,.16); color:#a5f3fc; border-color:rgba(34,211,238,.42); }
.learn-expiry-roles .role-pill--weekly { background:rgba(16,185,129,.16); color:#a7f3d0; border-color:rgba(52,211,153,.4); }
.learn-expiry-roles .role-pill--monthly { background:rgba(139,92,246,.2); color:#ddd6fe; border-color:rgba(167,139,250,.45); }
.learn-expiry-roles .role-pill--all { background:rgba(236,72,153,.18); color:#fbcfe8; border-color:rgba(244,114,182,.45); padding:0 .7rem; }
.learn-expiry-roles .role-horizon { font-size:.73rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#9aa7bf; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); padding:.2rem .55rem; border-radius:999px; }
.learn-expiry-roles .role-card__title { color:#f3f5fc; font-size:1.02rem; font-weight:700; line-height:1.35; }
.learn-expiry-roles .role-card__desc { margin:0; color:#b4bfd3; font-size:.88rem; line-height:1.55; }
.learn-expiry-roles figcaption { grid-column:1/-1; }
.learn-chain-example { display:grid; grid-template-columns:340px minmax(0,1fr); gap:1.35rem; align-items:center; margin:1.25rem 0 1.7rem; padding:1.15rem 1.25rem; background:linear-gradient(155deg, rgba(20,27,42,.92), rgba(14,19,31,.96)); border:1px solid rgba(255,255,255,.1); border-radius:16px; }
.learn-chain-example img { display:block; width:100%; max-width:340px; height:auto; border-radius:12px; border:1px solid rgba(255,255,255,.1); }
.learn-chain-example h3 { margin:0 0 .45rem; font-size:1.05rem; color:#f3f5fc; }
.learn-chain-example p { margin:0 0 .55rem; font-size:.93rem; line-height:1.58; color:#c3cde0; }
.learn-chain-example ul { margin:0; padding-left:1.15rem; font-size:.9rem; line-height:1.55; color:#b4bfd3; }
.learn-chain-example li + li { margin-top:.3rem; }
@media (max-width: 760px) {
  .learn-chain-example { grid-template-columns:1fr; }
  .learn-chain-example img { margin:0 auto; }
}
.learn-expiry-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.3rem; margin:1rem 0; }
.learn-expiry-strip > :is(strong,span) { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:4.3rem; padding:.35rem 0; border:1px solid #3b4354; border-radius:8px; font-size:.8rem; line-height:1.3; text-align:center; }
.learn-expiry-strip > strong { background:rgba(143,113,220,.16); border-color:var(--learn-accent); color:var(--learn-accent); }
.learn-expiry-strip small { display:block; font-size:.64rem; color:inherit; margin-top:.3rem; }
.learn-ladder figcaption,.learn-expiry-roles figcaption,.learn-aggregation figcaption { color:#aeb8ca; font-size:.84rem; line-height:1.6; margin-top:.65rem; }
.learn-aggregation .learn-two { margin-bottom:.65rem; }
body[data-section="learn"] .learn-clock h3 { color: #8ce7e5; }
body[data-section="learn"] .article .diagram { overflow-x: auto; }
@media(max-width:860px) {
  .learn-path,.learn-two,.learn-layer-grid { grid-template-columns: 1fr; }
  .learn-expiry-roles { grid-template-columns: 1fr; }
  body[data-section="learn"] .article { font-size: 1rem; }
  body[data-section="learn"] .article .table-wrap { max-width: 100%; }
  body[data-section="learn"] .article table { min-width: 480px; }
  body[data-section="learn"] .article .diagram svg { min-width: 580px; }
  body[data-section="learn"] .article .diagram figcaption { min-width: 0; }
  body[data-section="learn"] .article .diagram::after { content: "Swipe horizontally to read the diagram."; display: block; color: #aeb8ca; font-size: .78rem; margin: .45rem .4rem; }
  .learn-panel,.learn-path > a { padding: 1rem; }
}