/* Data clocks lesson: readable cadence and reference-price illustrations. */
.cl-lesson { --cl-color:#bca4f4; --cl-rgb:173,143,226; }
.cl-spot { --cl-color:#91e6cc; --cl-rgb:110,208,174; }
.cl-analytics,.cl-smart { --cl-color:#c5a6ff; --cl-rgb:177,135,239; }
.cl-oi { --cl-color:#9dc9f6; --cl-rgb:112,169,228; }
.cl-volume { --cl-color:#f3bd89; --cl-rgb:223,159,96; }
.cl-saved,.cl-pre { --cl-color:#f0cf8a; --cl-rgb:218,182,111; }
.cl-clock-map,.cl-reanchor { margin:1.3rem 0 1.6rem; padding:1.15rem; border:1px solid #48526d; border-radius:18px; background:radial-gradient(ellipse at 95% 0,#596aab20,transparent 60%),#141c2b; }
.cl-clock-map > figcaption,.cl-reanchor > figcaption { display:grid; gap:.45rem; margin-bottom:1.1rem; }
.cl-clock-map figcaption > strong,.cl-reanchor figcaption > strong { color:#edf1ff; font-size:1.18rem; line-height:1.4; }
.cl-eyebrow { color:var(--cl-color); font-size:.69rem; font-weight:800; line-height:1.5; text-transform:uppercase; letter-spacing:.055em; }
.cl-clock-row { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(125px,.9fr) minmax(0,1fr); gap:1rem; align-items:center; margin-top:.7rem; padding:1rem; border:1px solid #35445c; border-left:3px solid var(--cl-color); border-radius:0 12px 12px 0; background:linear-gradient(100deg,rgba(var(--cl-rgb),.09),#141e2b); }
.cl-clock-name { display:flex; gap:.7rem; align-items:flex-start; min-width:0; }
.cl-clock-name > span { display:grid; place-items:center; flex:0 0 32px; height:32px; border:1px solid var(--cl-color); border-radius:9px; color:var(--cl-color); font:600 .8rem/1 var(--mono); }
.cl-clock-name strong { display:block; color:#e7effb; font-size:.85rem; line-height:1.5; }
.cl-clock-name small { display:block; margin-top:.3rem; color:#aebfd5; font-size:.72rem; line-height:1.6; }
.cl-clock-row svg { display:block; width:100%; height:auto; color:var(--cl-color); }
.cl-clock-row svg path { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.cl-clock-row svg .cl-track { opacity:.18; stroke-width:1; }
.cl-clock-row svg circle { fill:currentColor; }
.cl-clock-row svg rect { fill:rgba(var(--cl-rgb),.13); stroke:currentColor; stroke-width:1.5; }
.cl-lesson .cl-clock-row p { margin:0; color:#b9c6da; font-size:.79rem; line-height:1.7; }
.cl-lesson .cl-figure-note { color:#b6c3d8; font-size:.81rem; line-height:1.7; margin:1rem 0 0; }
.cl-window { display:flex; align-items:flex-start; gap:.9rem; margin:1.4rem 0; padding:1rem 1.15rem; border:1px solid #3f6268; border-radius:14px; background:linear-gradient(120deg,#193238,#1c2133); }
.cl-window > span { display:grid; place-items:center; flex:0 0 34px; height:34px; border:1px solid #8dd7cf; border-radius:9px; color:#a6e8df; font:600 .8rem/1 var(--mono); }
.cl-window strong { color:#b7efe4; font-size:.94rem; }
.cl-lesson .cl-window p { margin:.5rem 0 0; font-size:.85rem; }
.cl-two,.cl-platforms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.3rem 0; }
.cl-info,.cl-platforms > section { min-width:0; padding:1.1rem; border:1px solid #41526c; border-top:3px solid var(--cl-color); border-radius:14px; background:linear-gradient(145deg,rgba(var(--cl-rgb),.09),#151d2b); }
.cl-lesson :is(.cl-info,.cl-platforms) h3 { margin:.6rem 0 .7rem; font-size:1.03rem; }
.cl-lesson :is(.cl-info,.cl-platforms) p { margin:0; font-size:.9rem; color:#bac7db; line-height:1.75; }
.cl-flow { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap:.5rem; align-items:center; margin:1.4rem 0; }
.cl-flow > div { min-width:0; align-self:stretch; padding:1rem; border:1px solid #455c7b; border-radius:13px; background:linear-gradient(145deg,#203249,#171e2c); }
.cl-flow > div:nth-of-type(2) { border-color:#625282; background:linear-gradient(145deg,#2c2641,#191f2d); }
.cl-flow > div:nth-of-type(3) { border-color:#3e6e6a; background:linear-gradient(145deg,#1e3439,#171f2c); }
.cl-flow div > span { display:block; margin-bottom:.5rem; color:#a3c7f0; font:600 .7rem/1.5 var(--mono); }
.cl-flow div:nth-of-type(2) > span { color:#c5adf3; }
.cl-flow div:nth-of-type(3) > span { color:#9dded0; }
.cl-flow strong { display:block; color:#e2eaf6; font-size:.86rem; line-height:1.5; }
.cl-flow small { display:block; margin-top:.5rem; color:#adbed3; font-size:.76rem; line-height:1.65; }
.cl-arrow { color:#8d9cb9; font-size:1.1rem; }
.cl-price-axis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0 .8rem .4rem; color:#a8b8d2; font:.74rem/1.5 var(--mono); }
.cl-price-axis span:nth-child(2) { text-align:center; }
.cl-price-axis span:last-child { text-align:right; }
.cl-band-row { margin-top:.7rem; padding:.9rem .8rem .75rem; border:1px solid #4c4267; border-left:3px solid var(--cl-color); border-radius:0 12px 12px 0; background:linear-gradient(100deg,rgba(var(--cl-rgb),.09),#151d2b); }
.cl-band-row.cl-pre { border-color:#5e523e; border-left-color:var(--cl-color); }
.cl-band-heading { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.3rem .8rem; }
.cl-band-heading strong { color:var(--cl-color); font-size:.87rem; }
.cl-band-heading > span { color:#b8c5d9; font:500 .76rem/1.5 var(--mono); }
.cl-band-track { position:relative; height:32px; margin:.7rem 0 .5rem; background:repeating-linear-gradient(to right,#8192b52b 0,#8192b52b 1px,transparent 1px,transparent 25%); }
.cl-band-track::before { content:""; position:absolute; top:0; bottom:0; left:50%; border-left:1px dashed #b4bfdc66; }
.cl-band { position:absolute; top:9px; height:12px; color:var(--cl-color); border:1px solid currentColor; border-radius:3px; background:rgba(var(--cl-rgb),.28); }
.cl-band::before,.cl-band::after { content:""; position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:1px; background:currentColor; }
.cl-band::before { left:-1px; }
.cl-band::after { right:-1px; }
.cl-band-track > i { position:absolute; top:11px; width:8px; height:8px; margin-left:-4px; border-radius:50%; border:1px solid #f0ecff; background:#e0d5f7; }
.cl-pre .cl-band-track > i { background:#f0cf8a; }
.cl-band-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; color:#b5c4d8; font-size:.73rem; }
.cl-band-values b { margin-left:.2rem; color:#e5edfa; font:600 .83rem/1.5 var(--mono); }
.cl-platforms > section:first-child { --cl-color:#a0d8e9; --cl-rgb:106,183,204; }
.cl-platforms > section:last-child { --cl-color:#bcadfa; --cl-rgb:162,143,219; }
.cl-lesson .cl-reading { padding-top:1rem; border-top:1px solid #3b465d; font-size:.83rem; color:#afbed4; }
@media(max-width:700px) {
  .cl-clock-row { grid-template-columns:minmax(0,1fr) 125px; gap:.5rem 1rem; }
  .cl-clock-row > p { grid-column:1/-1; }
  .cl-two,.cl-platforms { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:600px) {
  .cl-clock-map,.cl-reanchor { padding:.9rem .8rem; }
  .cl-clock-map figcaption > strong,.cl-reanchor figcaption > strong { font-size:1.08rem; }
  .cl-clock-row { grid-template-columns:minmax(0,1fr) 95px; padding:.9rem .75rem; gap:.65rem; }
  .cl-clock-name { gap:.55rem; }
  .cl-clock-name > span { flex-basis:27px; height:27px; font-size:.69rem; }
  .cl-clock-name strong { font-size:.81rem; }
  .cl-clock-name small { font-size:.7rem; }
  .cl-window { gap:.7rem; padding:1rem; }
  .cl-flow { grid-template-columns:minmax(0,1fr); gap:.45rem; }
  .cl-flow > div { padding:.9rem 1rem; }
  .cl-flow div > span { display:inline; margin-right:.7rem; }
  .cl-flow strong { display:inline; }
  .cl-flow small { margin-top:.4rem; }
  .cl-arrow { justify-self:center; transform:rotate(90deg); line-height:1; }
  .cl-band-heading { flex-direction:column; }
  .cl-band-values b { display:block; margin:.15rem 0 0; }
}
@media(max-width:360px) {
  .cl-clock-row { grid-template-columns:minmax(0,1fr); }
  .cl-clock-row svg { max-width:220px; }
}