/* "What you get" on the program's page (MONO-2385): the three in the order you use them, Look inside (wyg-look.css),
   then where you study. The site's tokens only (site.css); the three crop their real still as FT.c does. */
.wyg{margin-top:var(--sec)}
.wyg > h2{margin:0;font:700 var(--h2)/1.12 var(--display);letter-spacing:-.02em;text-wrap:balance;max-width:var(--w-h);color:var(--fg)}
.wyg-lede{margin:var(--gap-h) 0 0;font-size:var(--t-lede);line-height:1.5;color:var(--muted);max-width:var(--w-lede)}

/* the three: a numbered step, its cut-paper icon beside its name, its crop of the real screen above */
.wyg-three{list-style:none;margin:var(--gap-lede) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-card)}
.wyg-step{display:grid;align-content:start;gap:14px;padding:12px 12px var(--pad-card);border-radius:var(--r-card);background:var(--card);box-shadow:var(--elev-card)}
.wyg-crop{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:var(--r-in);background:var(--tint)}
.wyg-crop img{position:absolute;inset:0;width:100%;height:auto;transform-origin:0 0;max-width:none}
.wyg-sh{display:flex;align-items:center;gap:10px;padding:4px 12px 0}
.wyg-sh svg.ic{width:34px;height:34px;flex:none;overflow:visible}
.wyg-n{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--primary);font:700 13px/1 var(--body)}
.wyg-sh h3{margin:0;font:600 var(--t-h3)/1.15 var(--display);letter-spacing:-.015em;color:var(--fg)}
.wyg-sh h3 small{font:500 var(--t-sm)/1 var(--body);letter-spacing:0;color:var(--faint);margin-left:4px}
.wyg-step > p{margin:0;padding:0 12px;font-size:var(--t-body);line-height:1.5;color:var(--muted)}

.wyg-look{margin-top:var(--gap-lede)}

/* where you study: the real screens in a laptop and two phones, and the app's own PDF sheet */
.wyg-h3{margin:var(--sec) 0 0;font:600 var(--t-h3)/1.15 var(--display);letter-spacing:-.015em;color:var(--fg)}
.wyg-where{list-style:none;margin:var(--gap-card) 0 0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--gap-card)}
.wyg-where li{display:grid;align-content:start;gap:8px}
.wyg-where h4{margin:14px 0 0;font:600 var(--t-lg)/1.25 var(--display);letter-spacing:-.01em;color:var(--fg)}
.wyg-where p{margin:0;font-size:var(--t-sm);line-height:1.5;color:var(--muted)}
.wyg-where p b{color:var(--fg);font-weight:600}
.wyg-dev{height:clamp(170px,15vw,210px);display:flex;align-items:flex-end;justify-content:center;padding:18px 16px 0;border-radius:var(--r-card);background:var(--band);overflow:hidden}
.wyg-dev img{display:block;width:100%;height:auto;max-width:none}
.wyg-laptop{flex-direction:column;align-items:center}
.wyg-lid{width:88%;aspect-ratio:16/10;padding:5px;border-radius:10px 10px 0 0;background:#1b2a24;overflow:hidden}
.wyg-lid img{border-radius:4px 4px 0 0}
.wyg-laptop i{display:block;width:100%;height:10px;border-radius:0 0 10px 10px;background:linear-gradient(#cfd8d3,#aab7b0)}
.wyg-phones{gap:12px}
.wyg-phone{width:34%;max-width:118px;aspect-ratio:390/844;padding:4px;border-radius:18px 18px 0 0;background:#1b2a24;overflow:hidden;transform:translateY(22%)}
.wyg-phone img{border-radius:14px 14px 0 0}
.wyg-phone + .wyg-phone{transform:translateY(34%)}
.wyg-pdf{align-items:center;padding:16px}
.wyg-pdf img{width:auto;max-width:100%;max-height:100%;border-radius:14px;box-shadow:var(--elev-card)}

@media (max-width:900px){
  .wyg-three{grid-template-columns:1fr}
  .wyg-where{grid-auto-flow:row}
  .wyg-dev{height:200px}
}