/* Landing page — module chooser */
.landing{max-width:1160px;margin:0 auto;padding:clamp(16px,3vw,40px)}
.hero{text-align:center;padding:clamp(18px,4vw,44px) 0 clamp(22px,4vw,40px)}
.hero h2{font-size:clamp(26px,4.4vw,42px);letter-spacing:-.02em;margin-bottom:10px}
.hero p{color:var(--muted);max-width:560px;margin:0 auto;font-size:15.5px}

.module-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.module-card{
  display:flex;flex-direction:column;text-decoration:none;color:var(--text);
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;box-shadow:var(--shadow);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.module-card:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 14px 40px rgba(15,23,42,.14)}
.module-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.module-body h3{font-size:21px}
.module-body>p{color:var(--muted);font-size:14px;flex:1}
.module-tag{
  align-self:flex-start;font-size:11px;font-weight:650;text-transform:uppercase;
  letter-spacing:.08em;padding:4px 9px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
}
.studio-tag{background:#fdf2f8;color:#db2777}
[data-theme="dark"] .studio-tag{background:#4a1d3a;color:#f9a8d4}
.module-feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.module-feats li{font-size:12.5px;color:var(--muted);padding-left:18px;position:relative}
.module-feats li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.studio .module-feats li::before{color:#db2777}
[data-theme="dark"] .studio .module-feats li::before{color:#f9a8d4}
.module-cta{font-weight:650;font-size:14px;color:var(--accent);margin-top:6px}
.studio .module-cta{color:#db2777}
[data-theme="dark"] .studio .module-cta{color:#f9a8d4}

/* illustrative art panels */
.module-art{
  height:190px;display:grid;place-items:center;
  background:linear-gradient(135deg,#0d9488 0%,#0ea5e9 100%);position:relative;overflow:hidden;
}
.studio .module-art{background:linear-gradient(135deg,#db2777 0%,#7c3aed 55%,#f59e0b 130%)}

.pp-frame{
  width:96px;height:132px;background:#fff;border-radius:6px;position:relative;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.pp-head{position:absolute;left:50%;top:22px;transform:translateX(-50%);
  width:44px;height:52px;border-radius:50%;background:#d9a880}
.pp-body{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:76px;height:38px;border-radius:38px 38px 0 0;background:#334155}
.pp-guide{position:absolute;inset:8px;border:1.5px dashed rgba(13,148,136,.65);border-radius:4px}

.al-stack{position:relative;width:150px;height:120px}
.al-page{position:absolute;inset:0;background:#fff;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.28)}
.al-page.p2{transform:rotate(5deg) translate(8px,4px);opacity:.7}
.al-page.p3{transform:rotate(-6deg) translate(-9px,7px);opacity:.45}
.al-page.p1{padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:6px}
.al-photo{border-radius:4px}
.al-photo.a{background:linear-gradient(135deg,#fbbf24,#f97316)}
.al-photo.b{background:linear-gradient(135deg,#60a5fa,#7c3aed)}
.al-photo.c{background:linear-gradient(135deg,#34d399,#0ea5e9);grid-column:1/-1;height:26px}
.al-line{grid-column:1/-1;height:5px;border-radius:3px;background:#e2e8f0;width:70%}

.landing-notes{
  margin-top:34px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.landing-notes>div{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;
}
.landing-notes b{font-size:14px}
.landing-notes p{color:var(--muted);font-size:12.5px;margin-top:5px}

.back-link{
  display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);color:var(--muted);text-decoration:none;font-size:16px;
}
.back-link:hover{color:var(--accent);border-color:var(--accent)}