/* Blueprint v3, P2 part 4: the plan label and the locked cards. */
.lg-brandrow{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
@media (max-width:600px){.lg-brandrow{flex-wrap:wrap}}
.lg-plan-label{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:999px;border:1px solid var(--border-subtle,rgba(255,255,255,.14));color:var(--gray-300,#8E96A8);font-family:var(--font-body);font-size:16px;font-weight:600;letter-spacing:.02em;line-height:1.3;white-space:nowrap}
.lg-plan-label[data-plan=plus]{border-color:rgba(86,184,108,.45);color:var(--life,#56b86c);background:rgba(86,184,108,.08)}
.lg-plus-chip{display:inline-block;padding:2px 9px;border-radius:999px;background:rgba(86,184,108,.14);border:1px solid rgba(86,184,108,.45);color:var(--life,#56b86c);font-family:var(--font-mono);font-size:16px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;line-height:1.4}
.lg-locked{margin:1rem 0;padding:clamp(18px,3vw,26px);border:1px solid var(--border-subtle,rgba(255,255,255,.12));border-radius:var(--radius-lg,16px);background:linear-gradient(180deg,var(--bg-raised,#161a22),var(--bg-surface,#11141a));text-align:left;max-width:640px;overflow-wrap:anywhere}
.lg-locked-eye{margin:0 0 10px}
.lg-locked-title{font-family:var(--font-display,Georgia,serif);font-size:clamp(19px,2.4vw,22px);font-weight:var(--weight-regular,400);letter-spacing:-.01em;line-height:1.25;margin:0 0 8px;color:var(--text,#e8ecf2)}
.lg-locked-what{margin:0 0 12px;color:var(--text-secondary,#c4cad6);font-size:16px;line-height:1.55}
.lg-locked-example{margin:0 0 12px;padding:10px 12px;border-left:3px solid rgba(86,184,108,.55);background:rgba(255,255,255,.03);border-radius:0 10px 10px 0;color:var(--text-secondary,#c4cad6);font-size:16px;line-height:1.55}
.lg-locked-example span{display:block;font-family:var(--font-mono);font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-300,#8E96A8);margin-bottom:2px}
.lg-locked-keep{margin:0 0 16px;color:var(--gray-300,#8E96A8);font-size:16px;line-height:1.5}
.lg-locked[data-quiet] .lg-locked-keep{margin:0}
.lg-locked-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border-radius:11px;background:var(--life,#56b86c);color:#102818;font-weight:700;font-size:16px;text-decoration:none}
.lg-locked-btn:hover{box-shadow:0 0 0 3px rgba(86,184,108,.25)}
.lg-locked-btn:focus-visible{outline:2px solid var(--text,#e8ecf2);outline-offset:3px}
/* P7 part 14: the sections that colour and underline their links (.lg-reading a, .lg-plan a, .lg-practice a,
   .lg-reading-list a) must not turn the button's text green on green. P9: nor must the workspace's
   #app :is(.lg-reading,.lg-plan,...) a, whose id outranks the first rule. */
.lg-locked .lg-locked-btn,#app .lg-locked .lg-locked-btn{color:#102818;text-decoration:none}
@media (max-width:480px){.lg-locked-btn{display:flex;width:100%}}