/* Learn center and Academy. Builds on site.css; tokens only, so dark mode follows. */
.lsec{padding-top:clamp(48px,6vw,88px)}
.phero+.lsec{padding-top:clamp(40px,5vw,64px)}
.phero .crumb+h1{margin-top:22px}

/* index: chips then a grid of poster cards */
.lchips{margin-bottom:28px}
.lcards{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.lcard{padding:14px 14px 20px;gap:12px}
.lcard .card__img{margin:0;aspect-ratio:auto;border-radius:14px}
.lcard .card__img img{height:auto;object-fit:initial}
.lcard h3{font-size:18px;line-height:1.25;padding-inline:6px}
.lempty{border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:clamp(28px,5vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:16px;color:var(--ink-2)}

/* guide hero: text beside the portrait cover */
.lhero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.lhero__t{display:flex;flex-direction:column;align-items:flex-start}
.lhero h1{max-width:14ch}
.lhero .cta{margin-top:28px}
.lhero .btn{white-space:normal;height:auto;min-height:46px;padding-block:11px;text-align:left;line-height:1.3}
.lhero__img{justify-self:end;width:min(100%,420px)}
.lhero__img img{display:block;width:100%;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(15,15,18,.45)}

/* call to action card, in the ink panel language of the meet page pricing */
.lcta{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;border-radius:32px;background:var(--band-ink);color:#f2efe6;padding:clamp(28px,4.4vw,56px);overflow:hidden;
  --ink:#f2efe6;--ink-2:#b9b8c0;--ink-3:#8a8991;--line:rgba(242,239,230,.12);--line-2:rgba(242,239,230,.28);--pill:#dff14a;--pill-ink:#0f0f12;--pill-2-ink:#f2efe6}
.lcta__t{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.lcta__t .sub{color:var(--ink-2)}
.lcta__links{align-items:center;margin-top:8px}
.lor{font-size:14px;color:var(--ink-3)}
.lcta__img img{display:block;width:100%;border-radius:16px;background:#fff}

/* live template preview: sidebar image beside the embedded template */
.ltpl{margin-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr);border-radius:24px;overflow:hidden;background:var(--win);box-shadow:0 0 0 1px var(--line)}
.ltpl__side{background:var(--card-2);display:flex}
.ltpl__side img{display:block;width:127px;height:auto;align-self:flex-start}
/* the template renders at 60%, as on the Webflow page, so a whole page of it shows */
.ltpl__frame{position:relative;overflow:hidden;height:clamp(420px,52vw,600px);background:#fff}
.ltpl__frame iframe{position:absolute;left:0;top:0;width:166.667%;height:166.667%;border:0;transform:scale(.6);transform-origin:0 0}
.lsec>.lcta__links{margin-top:18px}
.lrel{margin-bottom:22px}

/* video lesson */
.lvideo{max-width:960px}
.lvideo iframe{aspect-ratio:16/9}

/* enterprise strip carried over from the old white footer */

@media(max-width:640px){
  .lcards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .lcard{padding:8px 8px 14px;gap:10px;border-radius:18px}
  .lcard .card__img{border-radius:12px}
  .lcard h3{font-size:14.5px;padding-inline:4px}
}
@media(max-width:860px){
  .lhero,.lcta{grid-template-columns:1fr}
  .lhero__img{justify-self:start;width:min(100%,360px)}
  .ltpl{grid-template-columns:1fr}
  .ltpl__side{display:none}
}