/* Security Radar landing page: additions to ashlar.css (same components and character, plus a few of its own) */
.rl-soon{cursor:default;opacity:.8}
.rl-p{display:inline-block;padding:3px 9px;border-radius:6px;border:1px solid #4a4a4a;color:#d6d6d6;font:700 12px Cairo;white-space:nowrap}
.rl-p.u{border-color:rgba(96,165,250,.5);color:#60a5fa}
.rl-p.g{border-color:rgba(52,211,153,.5);color:#34d399}
.rl-p.r{border-color:rgba(248,113,113,.6);color:#f87171}
.rl-p.o{border-color:rgba(251,146,60,.6);color:#fb923c}
.rl-p.y{border-color:rgba(251,191,36,.55);color:#fbbf24}

.rl .as-ic:before{display:none}
.rl .as-ic{border:1px solid var(--ln2)}

/* a review, up close */
.rl-tour-g{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:28px;align-items:center}
.rl-tour-f{position:relative;margin:0}
.rl-tour-f img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--ln2);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.rl-pin{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--a);color:#151515;font:800 italic 14px Kanit;box-shadow:0 0 0 4px rgba(255,122,26,.25)}
.rl-tour-f .rl-pin{position:absolute;transform:translate(-50%,-50%)}
.rl-tour-l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rl-tour-l li{display:flex;gap:14px;padding:16px 18px;border-radius:12px;background:var(--c1)}
.rl-tour-l .rl-pin{flex:none}
.rl-tour-l b{display:block;font:700 15px Cairo;color:#fff;margin-bottom:3px}
.rl-tour-l p{font-size:13.5px;line-height:1.5;color:#a9a9a9}

/* steps with the real screens */
.rl-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0;padding:0;list-style:none}
.rl-steps li{display:flex;flex-direction:column;border-radius:12px;background:var(--c1);overflow:hidden}
.rl-st-img{height:190px;overflow:hidden;border-bottom:1px solid var(--ln2);background:var(--c2)}
.rl-st-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
.rl-st-t{position:relative;padding:22px 22px 24px 62px}
.rl-n{position:absolute;left:20px;top:20px;width:28px;height:28px;border-radius:50%;background:var(--a);color:#151515;display:grid;place-items:center;font:800 italic 14px Kanit}
.rl-st-t h3{font:700 15px Cairo;font-style:normal;text-transform:none;margin-bottom:4px}
.rl-st-t p{font-size:13.5px;line-height:1.55;color:#a9a9a9}
.rl-how-f{margin-top:18px!important}


/* alerts */
.rl-al{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.rl-mail{border-radius:12px;background:#f3f3f1;color:#232323;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.rl-mail-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid #dcdcd8;background:#fff}
.rl-av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#1e1e1e;color:var(--a)}
.rl-mail-h b{display:block;font:700 14px Cairo;color:#111}
.rl-mail-h small{display:block;font:600 12.5px Cairo;color:#5c5c5c}
.rl-mail-b{padding:18px 22px 22px;font-size:13.5px;line-height:1.55}
.rl-mail-b>p{margin-bottom:10px!important}
.rl-ml{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:9px 0;border-top:1px solid #e2e2de}
.rl-ml span{font:700 12px Cairo;color:#6b6b6b;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
.rl-ml p{color:#1d1d1d}
.rl-ok{margin-top:12px!important;padding:10px 12px;border-radius:8px;background:#e8f6ee;color:#1d6b43}
.rl-off{color:#6b6b6b;font-size:12.5px}
.rl-al-side{display:grid;gap:16px}
.rl-dc{padding:16px 18px;border-radius:12px;background:#313338;color:#dbdee1;font:500 14px/1.4 Cairo}
.rl-dc-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rl-dc-av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--a);color:#151515;font:800 italic 13px Kanit}
.rl-dc-h b{color:#f2f3f5;font:700 14.5px Cairo}
.rl-dc-h em{padding:1px 5px;border-radius:4px;background:#5865f2;color:#fff;font:700 10px Cairo;font-style:normal}
.rl-dc-h small{color:#949ba4;font:500 12px Cairo}
.rl-dc-e{margin-left:44px;padding:12px 14px;border-radius:4px;background:#2b2d31;border-left:4px solid #3b82f6}
.rl-dc-e b{display:block;margin-bottom:6px;color:#fff;font:700 13.5px Cairo}
.rl-dc-e p{font-size:13px;line-height:1.45;color:#dbdee1}
.rl-dc-e p+p{margin-top:6px!important}
.rl-rules{list-style:none;margin:0;padding:20px 22px;border-radius:12px;background:var(--c1);display:grid;gap:9px}
.rl-rules li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:#c8c8c8}
.rl-rules svg{flex:none;margin-top:3px;color:var(--a)}

/* plugin */
.rl-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-bottom:12px}
.rl-pl{padding:24px 26px;border-radius:12px;background:var(--c1)}
.rl-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.rl-cols h3{font-size:16px;margin-bottom:12px}
.rl-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rl-cols li{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.45;color:#c8c8c8}
.rl-cols li svg{flex:none;margin-top:3px;color:var(--a)}
.rl-cols .no li svg{color:#ff7a6b}
.rl-fine{margin-top:20px!important;padding-top:16px;border-top:1px solid var(--ln2);font-size:13px;line-height:1.55;color:#9a9a9a}
.rl-plf{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;font:600 12.5px Cairo;color:#8a8a8a}
.rl-plf .as-b{display:inline-flex;align-items:center;gap:8px}
.rl-con{display:flex;flex-direction:column;border-radius:12px;background:#0f0f0f;border:1px solid var(--ln2);overflow:hidden}
.rl-con-h{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #222;background:#171717;font:700 12px Cairo;color:#9a9a9a}
.rl-con-h span{flex:1}
.rl-con-h i{width:9px;height:9px;border-radius:50%;background:#333}
.rl-con pre{flex:1;margin:0;padding:16px;font:500 12px/1.65 ui-monospace,Consolas,monospace;color:#bdbdbd;white-space:pre-wrap;word-break:break-word}
.rl-con pre .c{color:#fff}
.rl-con pre .g{color:#7bd88f}
.rl-con pre .o{color:#ffb37a}
.rl-con>p{padding:0 16px 14px;font:600 12px Cairo;color:#6f6f6f}

/* grading scales */
.rl-scale{display:grid;gap:12px}
.rl-sc{padding:24px 26px;border-radius:12px;background:var(--c1)}
.rl-sc h3{font-size:18px;margin-bottom:18px}
.rl-sc h3 small{margin-left:8px;font:600 12.5px Cairo;text-transform:none;color:#7d7d7d}
.rl-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:0;padding:0;list-style:none}
.rl-bar li{padding-top:14px;border-top:6px solid #4a4a4a}
.rl-bar.e li{border-top-color:#5a5a5a}
.rl-bar.e li.u{border-top-color:#60a5fa}
.rl-bar.e li.g{border-top-color:#34d399}
.rl-bar.s li.u{border-top-color:#60a5fa}
.rl-bar.s li.y{border-top-color:#fbbf24}
.rl-bar.s li.o{border-top-color:#fb923c}
.rl-bar.s li.r{border-top-color:#f87171}
.rl-bar b{display:block;font:700 14px Cairo;color:#fff;margin-bottom:4px}
.rl-bar span{display:block;font-size:13px;line-height:1.45;color:#a9a9a9;padding-right:6px}
.rl-note{margin-top:18px!important;padding-top:14px;border-top:1px solid var(--ln2);font-size:13.5px;color:#b4b4b4}

/* ashlar */
.rl-ash{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.rl-ash-t h2{font-size:34px;margin-bottom:14px}
.rl-ash-t p{font-size:15px;line-height:1.65;color:#b4b4b4;max-width:520px}
.rl-ash-t p+p{margin-top:12px!important}
.rl-ash-b{margin-top:22px}
.rl-ash img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--ln2)}

@media (max-width:980px){
  .rl-tour-g,.rl-two,.rl-al,.rl-ash{grid-template-columns:1fr}
  .rl-steps{grid-template-columns:1fr}
  .rl-bar{grid-template-columns:1fr;gap:10px}
  .rl-bar li{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:0 0 0 12px;border-top:0;border-left:5px solid #4a4a4a}
  .rl-bar.e li.u,.rl-bar.s li.u{border-left-color:#60a5fa}.rl-bar.e li.g{border-left-color:#34d399}.rl-bar.s li.y{border-left-color:#fbbf24}.rl-bar.s li.o{border-left-color:#fb923c}.rl-bar.s li.r{border-left-color:#f87171}
}
@media (max-width:640px){
  .rl-cols,.rl-cmds{grid-template-columns:1fr}
  .rl-ml{grid-template-columns:1fr;gap:2px}
  .rl-bar li{grid-template-columns:1fr;gap:2px}
  .rl-ash-t h2{font-size:28px}
  .rl-st-img{height:150px}
}