/* Grammar Mastery theme and lesson-specific demonstration.
   Extends the shared Vocabulary landing layout without changing production styles. */
.grammar-landing .vl-hero{
  background:radial-gradient(ellipse 55% 73% at 94% 50%,#ddf8ed 0,transparent 80%),
    linear-gradient(165deg,#f9fffc 0%,#fff 94%);
}
.grammar-landing .vl-hero:before{border-color:#d3f1e2}
.grammar-landing .accent-text{background:linear-gradient(108deg,#269d74,#248c72 70%,#3ab5a0);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.grammar-landing .vl-eyebrow{background:#e7f9ef;color:#248d6d;border-color:#cfeede}
.grammar-landing .vl-eyebrow-mark{color:#228867;font-size:9px;letter-spacing:-.02em}
.grammar-landing .vl-demo{border-color:#dbeee5;box-shadow:0 35px 72px rgba(38,103,83,.12),0 5px 14px rgba(33,101,74,.06)}
.grammar-landing .vl-demo-head .vl-demo-level{background:#e6f9ef;color:#278a69}
.grammar-landing .vl-demo h2{font-size:clamp(32px,3vw,43px)}
.grammar-landing .vl-demo h2 span{color:#9ed5bd}
.grammar-landing .vl-demo-tabs button[aria-selected="true"]{color:#198864}
.grammar-landing .vl-quiz-options button:not(:disabled):hover{border-color:#7ccfad;background:#f5fffa}
.grammar-landing .vl-float-top{color:#2c9075}
.grammar-landing .vl-word-assoc strong{background:#eaf9f1;color:#227d60}
.grammar-landing .vl-demo-tag{color:#649781}
.grammar-landing .vl-strip i{color:#bbdacd}
.grammar-landing .vl-strip span{color:#698e7d}
.grammar-landing .vl-why-icon{background:#e6f7ed;color:#228f6b}
.grammar-landing .vl-why-grid article:nth-child(2) .vl-why-icon{background:#ebf1ff;color:#4b6ac9}
.grammar-landing .vl-why-grid article:nth-child(3) .vl-why-icon{background:#fff1e4;color:#c98a44}
.grammar-landing .vl-process-steps>div>span{background:#e6f9ef;color:#238b6a}
.grammar-landing .vl-audience-grid article>span{background:#e8f8f0;color:#288f6c}
.grammar-landing .vl-cta-panel{background:linear-gradient(125deg,#147e69,#39aa87)}
.grammar-landing .vl-cta-panel h2 span{color:#d3f8e9}
.grammar-landing .vl-cta-panel .section-kicker{color:#cff8e9}
.grammar-landing .vl-cta-panel>p:not(.section-kicker){color:#dbf8eb}
.grammar-landing .vl-hero .btn-primary,.grammar-landing .vl-process-copy .btn-primary{
  background:#228e6d;box-shadow:0 9px 23px rgba(35,142,105,.18)}
.grammar-landing .vl-hero .btn-primary:hover,.grammar-landing .vl-process-copy .btn-primary:hover{
  background:#187d60}
.grammar-landing .vl-demo-content{min-height:181px}
.gm-rule-label{font-size:11px;line-height:1.5;color:#71849a;margin:0 0 11px}
.gm-formula{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.gm-formula span{border:1px solid #d1eedd;border-radius:9px;background:#f1fff7;color:#238769;
  padding:11px 12px;font-size:12px;font-weight:840;white-space:nowrap}
.gm-formula b{font-size:17px;color:#9db5a9}
.gm-rule-caption{color:#71829a;font-size:11px;line-height:1.6}
.gm-rule-caption strong{color:#258c67}
.gm-example-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gm-example-pair p{border:1px solid #e5edf0;border-radius:10px;padding:12px 10px;background:#fcfefd;min-width:0}
.gm-example-pair span{display:block;font-size:9px;color:#719385;font-weight:800;margin-bottom:9px}
.gm-example-pair strong{display:block;font-size:12px;line-height:1.5;color:#2b5140;overflow-wrap:anywhere}
.grammar-landing .vl-example strong{color:#278a69}
.grammar-landing .vl-panel-label{color:#8ca99a}
@media(max-width:560px){
  .grammar-landing .vl-demo h2{font-size:34px}
  .gm-formula{gap:6px}
  .gm-formula span{padding:9px 8px;font-size:10px}
  .gm-formula b{font-size:13px}
  .gm-example-pair{gap:7px}
  .gm-example-pair p{padding:11px 8px}
  .gm-example-pair strong{font-size:11px}
  .grammar-landing .vl-demo-content{min-height:192px}
}
@media(max-width:375px){
  .grammar-landing .vl-demo h2{font-size:30px}
  .grammar-landing .vl-pronunciation span{display:block;margin:6px 0 0}
  .gm-formula span{font-size:9px;padding:9px 6px}
  .gm-example-pair{grid-template-columns:1fr}
  .gm-example-pair p{padding:9px 10px}
  .gm-example-pair span{margin-bottom:4px}
  .grammar-landing .vl-demo-content{min-height:210px}
}