/* ReadToLoud Design Lab — reversible enhancement layer */
.rtl-design-lab {
  max-width: 1080px;
  margin: 3rem auto 0;
  padding: 0 0.25rem;
}
.rtl-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
.rtl-lab-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200,168,96,.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 10%, rgba(0,122,255,.18), transparent 32%),
    radial-gradient(circle at 84% 16%, rgba(200,168,96,.16), transparent 28%),
    linear-gradient(145deg, rgba(8,18,34,.82), rgba(8,7,14,.94));
  box-shadow: 0 22px 70px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.rtl-lab-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 48%, transparent 58%);
  transform: translateX(-120%);
  animation: rtlLabSheen 8s ease-in-out infinite;
}
@keyframes rtlLabSheen { 0%, 42% { transform: translateX(-120%); } 58%, 100% { transform: translateX(120%); } }
.rtl-lab-head { padding: 1.35rem 1.35rem 0; position: relative; z-index: 1; }
.rtl-lab-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #c8a860; margin-bottom: .45rem; }
.rtl-lab-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.55rem, 3vw, 2.25rem); line-height: 1.05; color: #fff; margin: 0; letter-spacing: -.04em; }
.rtl-lab-title em { font-style: italic; color: #c8a860; }
.rtl-lab-sub { color: rgba(255,255,255,.48); line-height: 1.6; font-size: .92rem; margin: .8rem 0 0; max-width: 58ch; }
.rtl-pipeline-console { padding: 1.15rem 1.15rem 1.25rem; position: relative; z-index: 1; }
.rtl-pipeline-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin: 1rem 0 1rem; }
.rtl-pipe-node {
  min-height: 96px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.74);
  padding: .85rem .55rem;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.rtl-pipe-node:hover, .rtl-pipe-node.is-active {
  transform: translateY(-4px);
  border-color: rgba(200,168,96,.52);
  background: rgba(200,168,96,.1);
  box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 26px rgba(200,168,96,.1);
}
.rtl-pipe-ico { font-size: 1.35rem; display: block; margin-bottom: .45rem; }
.rtl-pipe-svg { width: 38px; height: 38px; margin: 0 auto .55rem; color: rgba(232,226,211,.82); filter: drop-shadow(0 4px 12px rgba(200,168,96,.12)); }
.rtl-pipe-svg svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }
.rtl-pipe-node:hover .rtl-pipe-svg,
.rtl-pipe-node.is-active .rtl-pipe-svg { color: #d6b66e; }
.rtl-pipe-name { display: block; font-size: .75rem; font-weight: 850; letter-spacing: .03em; }
.rtl-pipe-cost { display: inline-block; margin-top: .35rem; color: #c8a860; font-size: .64rem; font-weight: 800; border: 1px solid rgba(200,168,96,.2); border-radius: 999px; padding: .12rem .42rem; }
.rtl-pipe-detail { border: 1px solid rgba(255,255,255,.08); border-radius: 20px; background: rgba(0,0,0,.22); padding: 1rem; min-height: 136px; }
.rtl-pipe-detail h3 { font-size: 1.05rem; color: #fff; margin: 0 0 .45rem; }
.rtl-pipe-detail p { color: rgba(255,255,255,.55); line-height: 1.55; font-size: .88rem; margin: 0; }
.rtl-pipe-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.rtl-meta-chip { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .28rem .55rem; background: rgba(255,255,255,.045); }
@media (max-width: 860px) {
  .rtl-lab-grid { grid-template-columns: 1fr; }
  .rtl-pipeline-rail { grid-template-columns: repeat(2, 1fr); }
  .rtl-pipe-node:last-child { grid-column: 1 / -1; }
}

/* Credits education + Legal cockpit */
.rtl-credit-guide,
.rtl-legal-cockpit {
  max-width: 1080px;
  margin: 2rem auto 0;
}
.rtl-credit-guide { margin-bottom: 2rem; }
.rtl-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.rtl-guide-card,
.rtl-legal-cockpit {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(200,168,96,.2);
  border-radius: 26px;
  background:
    radial-gradient(circle at 20% 0%, rgba(200,168,96,.13), transparent 34%),
    linear-gradient(145deg, rgba(11,22,36,.82), rgba(9,8,14,.94));
  box-shadow: 0 18px 54px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
.rtl-guide-card { padding: 1.15rem; }
.rtl-guide-icon { font-size: 1.5rem; margin-bottom: .65rem; }
.rtl-guide-title { color: #fff; font-size: 1.08rem; font-weight: 900; letter-spacing: -.03em; margin-bottom: .4rem; }
.rtl-guide-text { color: rgba(255,255,255,.52); font-size: .86rem; line-height: 1.55; min-height: 4rem; }
.rtl-guide-meter { height: 7px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin: .9rem 0 .55rem; }
.rtl-guide-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#10304a,#c8a860); }
.rtl-guide-caption { color: rgba(200,168,96,.82); font-size: .68rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.rtl-legal-cockpit { padding: 1.25rem; margin-top: 1rem; margin-bottom: 2rem; }
.rtl-legal-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; }
.rtl-legal-doc {
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
  padding: 1rem;
}
.rtl-doc-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.rtl-doc-title { color: #fff; font-weight: 900; letter-spacing: -.02em; }
.rtl-risk-badge { border-radius: 999px; padding: .28rem .55rem; font-size: .65rem; font-weight: 900; color: #fbbf24; border: 1px solid rgba(251,191,36,.28); background: rgba(251,191,36,.08); white-space: nowrap; }
.rtl-doc-lines { display: grid; gap: .45rem; margin-bottom: 1rem; }
.rtl-doc-lines span { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); }
.rtl-doc-lines span:nth-child(1){width:88%}.rtl-doc-lines span:nth-child(2){width:72%}.rtl-doc-lines span:nth-child(3){width:94%}.rtl-doc-lines span:nth-child(4){width:58%}
.rtl-legal-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.rtl-legal-tag { font-size: .68rem; color: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .28rem .52rem; background: rgba(0,0,0,.18); }
.rtl-legal-panel { display: grid; gap: .65rem; }
.rtl-insight {
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.2);
  padding: .8rem .9rem;
}
.rtl-insight-label { font-size: .65rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #c8a860; margin-bottom: .3rem; }
.rtl-insight-text { color: rgba(255,255,255,.68); font-size: .85rem; line-height: 1.5; }
.rtl-legal-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0; }
.rtl-legal-tab { border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.045); color: rgba(255,255,255,.72); border-radius: 999px; padding: .45rem .7rem; font-size: .74rem; font-weight: 850; cursor: pointer; }
.rtl-legal-tab.is-active { border-color: rgba(200,168,96,.45); background: rgba(200,168,96,.1); color: #fff; }
@media (max-width: 860px) {
  .rtl-guide-grid, .rtl-legal-grid { grid-template-columns: 1fr; }
  .rtl-guide-text { min-height: auto; }
}

.rtl-meter-starter{width:32%}.rtl-meter-standard{width:62%}.rtl-meter-pro{width:92%}

/* Hero signal refinement + microinteractions */
.rtl-hero-signal {
  position: relative;
  width: 176px;
  height: 176px;
  margin: 0 auto 1.75rem;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.rtl-hero-signal img { position: relative; z-index: 3; margin: 0 !important; }
.rtl-hero-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(200,168,96,.28);
  box-shadow: 0 0 32px rgba(0,122,255,.12), inset 0 0 28px rgba(200,168,96,.06);
  animation: rtlHeroPulse 5.5s ease-in-out infinite;
  z-index: 1;
}
.rtl-hero-ring-b { inset: 0; border-color: rgba(0,122,255,.22); animation-delay: -2.2s; }
.rtl-hero-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c8a860;
  box-shadow: 0 0 18px rgba(200,168,96,.8);
  z-index: 2;
  animation: rtlHeroOrbit 7s linear infinite;
}
.rtl-hero-spark-a { transform-origin: 72px 72px; }
.rtl-hero-spark-b { background:#4f8cff; box-shadow:0 0 18px rgba(79,140,255,.75); animation-duration: 9s; animation-direction: reverse; }
@keyframes rtlHeroPulse { 0%,100% { transform: scale(.92); opacity:.35; } 50% { transform: scale(1.05); opacity:.9; } }
@keyframes rtlHeroOrbit { from { transform: rotate(0deg) translateX(78px) rotate(0deg); } to { transform: rotate(360deg) translateX(78px) rotate(-360deg); } }
.btn-primary, .btn-secondary, .cbtn, .rtl-pipe-node, .rtl-guide-card, .rtl-legal-tab, .credit-card {
  will-change: transform;
}
.btn-primary:hover, .btn-secondary:hover, .cbtn:hover:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}
.btn-primary:focus-visible, .btn-secondary:focus-visible, .cbtn:focus-visible:focus-visible, .rtl-pipe-node:focus-visible, .rtl-legal-tab:focus-visible {
  outline: 2px solid rgba(200,168,96,.72);
  outline-offset: 3px;
}
.rtl-guide-card:hover, .rtl-legal-cockpit:hover {
  border-color: rgba(200,168,96,.34);
  box-shadow: 0 24px 72px rgba(0,0,0,.34), 0 0 32px rgba(200,168,96,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.rtl-credit-estimate-note {
  max-width: 760px;
  margin: .7rem auto 2rem;
  color: rgba(255,255,255,.42);
  font-size: .78rem;
  line-height: 1.55;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .rtl-hero-ring, .rtl-hero-spark, .rtl-lab-card::before { animation: none !important; }
  .btn-primary:hover, .btn-secondary:hover, .cbtn:hover:hover, .rtl-pipe-node:hover { transform: none; }
}
@media (max-width: 640px) {
  .rtl-hero-signal { width: 148px; height: 148px; }
  @keyframes rtlHeroOrbit { from { transform: rotate(0deg) translateX(64px) rotate(0deg); } to { transform: rotate(360deg) translateX(64px) rotate(-360deg); } }
}