/*
 * roi-lite.css: the compact value module on the homepage, /pricing and
 * /get-started (js/roi-lite.js, tools/roi-lite-block.js). Built from
 * site.css tokens only. Phone first: one column, 44px controls, no fixed
 * widths. The only motion is the bar width, off under reduced motion.
 */
.rl-section { padding: clamp(32px, 4.5vw, 64px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-raise); }
.rl { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: center; }
.rl-copy { min-width: 0; }
.rl-copy h2 { margin-top: 14px; line-height: 1.12; }
.rl-lede { margin-top: 14px; color: var(--muted); font-size: 16.5px; max-width: 52ch; }
.rl-form { margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 6px 12px; max-width: 480px; }
.rl-form[hidden] { display: none; }
.rl-form label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rl-form label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.rl-form label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.rl-form select {
  grid-row: 2; width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px;
}
.rl-form select:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.rl-link { margin-top: 20px; min-height: 48px; }
.rl-link svg { width: 16px; height: 16px; }

.rl-card { min-width: 0; border: 1px solid #338c50; border-radius: var(--radius); padding: clamp(18px, 2.4vw, 28px); background: #101d14; box-shadow: 0 30px 80px -50px var(--green-glow); }
.rl-tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); }
.rl-basis { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.rl-gain { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.rl-gain[hidden] { display: none; }
.rl-label { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rl-big { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(29px, 3.3vw, 42px); line-height: 1.08; color: var(--green); margin-top: 6px; overflow-wrap: anywhere; }
.rl-sub { display: block; margin-top: 8px; color: var(--muted); font-size: 14.5px; }
.rl .rl-bars { gap: 10px; margin: 18px 0 0; }
.rl .rl-bars span { margin-bottom: 5px; font-size: 13.5px; align-items: baseline; }
.rl .rl-bars i { height: 12px; min-width: 3px; transition: width 180ms ease-out; }
.rl-bars [data-lite-bar="conservative"] { background: #70897a; }
.rl-bars [data-lite-bar="upside"] { background: #4cbe80; }
.rl-bars [data-lite-bar="cost"] { background: #d9e9df; }
.rl-be { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.rl-be strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(21px, 2.4vw, 26px); line-height: 1.15; color: var(--ink); }
.rl[data-verdict="breakeven"] .rl-be strong { font-size: clamp(30px, 4.2vw, 44px); color: var(--green); }
.rl-verdict { margin-top: 12px; font-size: 14.5px; color: var(--ink); }
.rl-note { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.rl-note a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: 6px 0; }
.rl[aria-busy="true"] .rl-card { opacity: 0.75; }

@media (min-width: 900px) {
  .rl { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
@media (prefers-reduced-motion: reduce) { .rl .rl-bars i { transition: none; } }